CSSアニメーション 2つの機能
このサイトのランキング画像にマウスを当ててみてください。
ふわっと透過されるのがわかるかと思います。
この効果はCSSアニメーションで実現しています。
CSSアニメーションはCSSのみでアニメーションを実現でき、
サイトを見る人を視覚的に楽しませ、注意を引いたり、次のステップへ促したりすることができます。
CSSアニメーションには
CSS TransitionとCSS Animationの2つの実装方法があります。
CSS Transition(CSS トランジション)
要素の変化にかかる時間を指定できるプロパティです。
単純な動きのアニメーションを実装する時に利用します。
■特徴
・要素の始点と終点の二点間をスムーズに変化させる
・きっかけ(hoverなど)を与えないと動かない
・ループがない
詳しくはこちらの記事で紹介します。
CSS Animation(CSS アニメーション)
始点から終点までの二点間の任意の経過時点で、その地点ごとの状態を指定することが出来ます。
細かい動きのアニメーションを実装する時に利用します。
■特徴
・細かい時点ごとの設定が可能(キーフレーム)
・きっかけ(hoverなど)がなくても動く
・ループ可能
詳しくはこちらの記事で紹介します。