CSS アニメーションの書き方、使い方とCSSサンプルをまとめます。CSS animationは、プロパティが多く、また名前が複雑なせいか、いつまでたってもなかなか覚えられません。この記事にたどり着いたあなたも、たぶんそうなのではないでしょうか。
プロパティの仕様自体はそれほど複雑ではないので、この記事では、とにかくすぐコピペして使えるようにまとめました。
目次
CSS animation の全プロパティ
さっさと使いたいと思いますので、先に全プロパティです。
下記の例で、値は、animation-name 以外は初期値を記載しています。コメントアウトの中で、パイプで区切って利用可能な値を列挙していますので、適当なものを利用して下さい。
CSS animation のサンプル
.target{ animation-name: my-animation; animation-duration: 3s; animation-timing-function: ease; /* ease | ease-out | ease-in | ease-in-out | linear | cubic-bezier(0.1, 0.7, 1.0, 0.1)*/ animation-delay: 0; animation-iteration-count: 1; /* 1 | infinite */ animation-direction: normal; /* normal | reverse | alternate | alternate-reverse */ animation-fill-mode: none; /* none | forwards | backwards | both */ animation-play-state: running; /* running | paused */ } @keyframes my-animation{ 0% { opacity:1; } 100% { opacity:0.1; } }
プロパティの数が多いので、下手にショートハンドにしない方が管理しやすいと、個人的には思います。
ほんとにコピペだけしたい人は、より実用的なwコメントなしバージョンです。
CSS animation のサンプル(コメントなし版)
.target{ animation-name: my-animation; animation-duration: 3s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: none; animation-play-state: running; } @keyframes my-animation{ 0% { } 100% { } }
CSSのベンダープリフィックスは各自、必要に応じて下さい。こういうのもあります。
各プロパティの概要
いちおう少しだけ解説を開催します。だいたいなんとなく分かりますよね。
animation-name
文字列で、後にkeyframesで指定するアニメーションの識別子を指定します。カンマで区切ると複数のアニメーション名を指定できます。name以外のプロパティも同様にカンマで区切って、それぞれのアニメーションの振る舞いを指定します。
animation-duration
アニメーションの全長の長さです。
animation-timing-function
関数名を入力します。Google Chromeの開発コンソールなどを利用すると、細かなアニメーション関数をしていできるでしょう。
animation-delay
アニメーションの開始をどのくらい遅らせるか、指定します。
animation-iteration-count
整数、infinite、少数のいずれかを入力します。infiniteは無限に繰り返します。少数を利用すると、アニメーションの途中で静止させる事もできます。
animation-direction
normal
アニメーションが1周するごとに、初期状態にリセットされてからアニメーションが再び始まります。これがデフォルトです。
reverse
normal の逆です。毎回、逆方向に、最終状態からアニメーションが開始します。このとき、timing-functions の向きの逆になります。「逆回し再生」とイメージすれば良いでしょう。(例えば ease-in のアニメーションは、逆回し再生では ease-out となります。)
alternate
alternateは直訳すると「交互に」という意味です。つまり、normal と reverse を交互に行います。
alternate-reverse
名前から想像がつきますが、初回のアニメーションは逆再生し、その次は順方向に実行します。これを交互に繰り返します。
animation-fill-mode
少しだけトリッキーなプロパティです。アニメーションのkeyframesで指定したCSSプロパティを、アニメーションの開始前、開始後に適応するかどうかを指定します。
none
適応なしです。
forwards
前方方向にのみ適応します。すなわち、keyframesで計算された最後の値をアニメーションの終了後も維持します。アニメーションの方向が逆(reverse)の時でも最後の値を維持します。
backwards
後方にのみ適応します。すなわち、keyframesで計算される一番最初の値をアニメーションの開始前に適応します。特にanimation-delayが設定された時、大きな意味を持ちます。
both
前方、後方、両方にkeyframesで計算される値を適応します。forwards, backwardsを組み合わせた値です。
animation-play-state
paused, runningのいずれかの値を適応し、アニメーションが停止・進行状態を指定します。この値をアニメーションの途中で追加すれば、進行中のアニメーションを停止する事ができます。この値を、javascriptを使って利用すれば、アニメーションの進行をコントロールできるでしょう。
[Tip #1] display:none 要素へのアニメーション適応
display:none で消しておいた要素をアニメーションさせるにはコツが必要です。なぜなら、display:none要素へはいくつかのCSSプロパティが無効化されてしまうからです。
下記のように記述すると、消しておいた要素を表示させて、直後にアニメーションを開始できます。
/* 消しておいた要素を、徐々に表示させる */ @keyframes my-animation{ 0% { display:none }, 1% { display:block; opacity:0 }, 100% { opacity:1 }, }
一度、フレームを区切ると、display:blockに対してアニメーションを開始できるようになります。ラグが気になるようであれば、1%の値をより小さく(0.01%)とすることもできます。