MARKLEAPS[マークリープス]

TECH BLOG

マークリープス技術ブログ

open

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

css アニメーション

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

 

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

CSS Transition(CSS トランジション)

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

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

CSS Animation(CSS アニメーション)

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

 

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

 

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

よく読まれている関連記事

関連最新記事