CSSアニメーション　2つの機能

このサイトのランキング画像にマウスを当ててみてください。
ふわっと透過されるのがわかるかと思います。
この効果はCSSアニメーションで実現しています。
CSSアニメーションはCSSのみでアニメーションを実現でき、
サイトを見る人を視覚的に楽しませ、注意を引いたり、次のステップへ促したりすることができます。

 

CSSアニメーションには
CSS TransitionとCSS Animationの2つの実装方法があります。

CSS Transition（CSS トランジション）

要素の変化にかかる時間を指定できるプロパティです。
単純な動きのアニメーションを実装する時に利用します。
 
■特徴
・要素の始点と終点の二点間をスムーズに変化させる
・きっかけ（hoverなど）を与えないと動かない
・ループがない

詳しくはこちらの記事で紹介します。

CSS Animation（CSS アニメーション）

始点から終点までの二点間の任意の経過時点で、その地点ごとの状態を指定することが出来ます。
細かい動きのアニメーションを実装する時に利用します。

 

■特徴
・細かい時点ごとの設定が可能（キーフレーム）
・きっかけ（hoverなど）がなくても動く
・ループ可能

 

詳しくはこちらの記事で紹介します。