【保存版】CSSアニメーションの種類・使い方・サンプル - 株式会社オーツー｜スタッフブログ

こんにちは。 Webデザイナーの山本です。 今回はCSSアニメーションの種類や詳細、使い方の例などをご紹介します！ CSSアニメーションとは？ CSSアニメーションとは、CSSだけでアニメーションすることができる機能のことです。 animationとtransitionの２種類があります。 animationは再生回数を指定したり逆再生や遅延して再生など詳細な指定が可能ですが、transitionはhover（マウスオーバー）などのタイミングで１度だけの再生になります。 主な違いはこんな感じ。 ▼animation ・ループできる ・本格的なアニメーションの設定ができる ・再生後にプロパティの継続ができる ・自動再生ができる ▼transition ・ループできない ・hover等のきっかけが必要（自動再生できない） ・再生後にプロパティが元に戻る animation animationは