自己紹介
最近うっかりが多いくらげです。
この前とうとう仕事用のカバンを忘れて家を出てしまい、慌てて取りに帰りました。
今回は、個人的に最近よく使うCSSアニメーションの使い方についてメモしておきます。
cssアニメーションとは
今までJSで作成していたアニメーションが、CSS３で気軽に作れるようになったよ！というものです。
ある程度の大きさのものなら、JSよりも軽く動作します（信用のしすぎには注意）。
アニメーションの動きを設定するキーフレームとアニメーションの時間やタイミングを設定するアニメーションプロパティの２つのパーツを組み合わせて使います。
使えるOS
- Chrome…使用可能。
- Firefox…使用可能。
- IE…10以上で対応。@media内で指定すると動かない等バグあり。
- Opera…全てで使えない。
- Safari… 9以前のOSではベンダープレフィクス(
webkit)が必要。
使い方
キーフレーム部分
@keyframes ghost {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
キーフレームは@規則を使用して設定します。
@規則とはセレクタとプロパティでは指定できない機能を補う便利な規則です。文字コードを設定する＠charsetとかで使いますよね、あれです、あれの仲間です。
キーフレームではアニメーション中のあるタイミングで、そうなっていて欲しいプロパティを設定します。
@keyframeの後には、アニメーションの名前をつけてあげましょう。
キーフレームの設定には、%もしくは、始めと終わりのみ設定する場合はfromとtoでも構いません。
0%と100%もしくは fromとtoを必ず設定してあげましょう。じゃないと拗ねて動かなくなります。
アニメーションプロパティ
div {
animation-name: ghost;
animation-duration: 3s;
}
名前をつけて設定したキーフレームは、アニメを設定したいセレクタにanimationプロパティとして指定してあげます。
細かい設定はanimationのサブプロパティで個別に設定してあげることもできます。
| プロパティ名 | 設定できるもの |
|---|---|
| animation-name | 使用するキーフレームの名前 |
| animation-duration | 一回のアニメーションの長さ |
| animation-timing-function | 進め方。イージングの指定 |
| animation-delay | アニメーションが始まるまでの遅延時間 |
| animation-iteration-count | アニメーションを繰り返す回数 |
| animation-direction | アニメーションを逆方向に繰り返すか、始めの状態にリセットして繰り返すか |
| animation-fill-mode | アニメーション後前に指定したスタイルを適用させるかどうか |
| animation-play-state | アニメーションの一時停止と再開 |
ね、簡単でしょ
JSを使わなくてもいいって、それだけで気持ちが楽だったりします。
慣れれば複雑な動きも作れるようになるので、いろいろさわってみてください。