【CSS】animationと@keyframesについて
はじめに
おはやいます。中二病エンジニアです！
なんとなくの勢いでzennの垢作ったので、なんとなく記事を投稿してみました。
いつもはQiitaで記事を上げてるのでよかったら見ろです。
で、今回はCSSでアニメーションを実装する時によく使うanimationプロパティと@keyframesについて備忘録として残そうと思います。駆け出しの方であったり、感覚でコードを書いている方々は必ず全員このanimationプロパティと@keyframesで躓くと思います。（ソースはワイ）
animationプロパティと@keyframesを簡単にでも抑えておくことで実装できるアニメーションの幅が広がり、ワンランク上のwebアプリケーションを開発できます。
animationプロパティについて
animationプロパティとはその名の通り、アニメーションを作成するCSSプロパティとなっております。種類が多いので以下で簡単にまとめました。
animationプロパティ一覧
| プロパティ | 概要 | 初期値 |
|---|---|---|
| ①animation-name | アニメーション名（@keyframes名） | none |
| ②animation-duration | アニメーションが開始してから終了するまでの時間 | 0 |
| ③animation-timing-function | アニメーションの速度 | ease |
| ④animation-delay | アニメーションが開始するまでの時間 | 0 |
| ⑤animation-iteration-count | アニメーションを繰り返す回数 | 1 |
| ⑥animation-direction | アニメーションの再生方向（順番） | normal |
| ⑦animation-fill-mode | アニメーション開始時と終了時のスタイルの状態 | none |
| ⑧animation-play-state | アニメーションの再生・停止 | running |
※簡単にまとめただけなので詳しい値の記述方法については以下のドキュメントを見てみて下さい。
尚、上記一覧のプロパティを一括で指定するプロパティもあります。一括で指定する場合は一覧の上から順番に記述します。
.sample {
animation:①-name ②-duration ③-timing ④-delay ⑤-iteration ⑥-direction ⑦-fill ⑧-play;
}
@keyframesについて
@keyframesはアニメーション開始から終了までどのような動きをするのかを指定できるものです。animationプロパティと一緒に使うと、より複雑にアニメーションを展開することができます。
基本の書き方は以下になります。
@keyframes アニメーション名(なくても良い) {
0% {
CSSプロパティ:値;
}
100% {
CSSプロパティ:値;
}
}
0%はアニメーションの開始、100%はアニメーションの終わりを表しています。（0%はto、100%はfromに置き換え可能）
transitionとの違いについて
animationの他にもtransitionでもアニメーションを実装できます。駆け出しの方や、いつもどっかの誰かが書いた記事から脳死コピペして実装している方（ワイのことすぎて鎖付きブーメラン飛んでくる勢い）は違いがわからないと思います。その脳死コピペをしまくってきたワイが同志達に共有してやりましょう！！（そもそも脳死コピペを多用しまくる人はコピペするために記事クリックしてるから文なんてちゃんと読んでないからこんなこと書いても意味ない。ソースはワイ）
双方の違いに関しては、以下の表でまとめました。
| - | animation | transition |
|---|---|---|
| ループ | ○ | × |
| 再生回数設定 | ○ | 一回のみ再生 |
| 遅延設定 | ○ | ○ |
| 緩急設定 | ○ | ○ |
| 再生時のトリガー | 自動再生可能 | hoverやactiveの疑似要素 |
| アニメーションの方向 | ○ | × |
おさえておくポイントとしては、transitionはアニメーションの始まりと終わりのみ指定できるのに対し、animationはアニメーションの動きを細かく指定可能となります。他にも、transitionはマウスホバーや、クリック等のトリガーが必要なのに対し、animationはトリガーが不要となります。
これだけ見ると、一見animationしか勝たんくね？と思うかもしれませんが、実際の話、一長一短で適材適所になります。
自動再生やループするような細かい設定が必要なアニメーションはanimation、それ以外はtransitionと覚えておけば良いでしょう。
transitionに関しては今回は説明しませんのでわからない方、気になった方は以下のドキュメントを見てみて下さい。（気分によっては記事書くかもしれないです）
animationと@keyframesでの実装方法
実際個人の技術ブログなんて自分自身のメモ用とかアウトプットでしか書いてないから実装方法だったり、簡単な例とかは書かないつもりだったけど気分で書くことにしました。気分屋世界ランキングあったらトップ100には入りそう。
とりあえず誰かが書いたブログから脳死コピペしてきたものをアレンジしてみました！早速鎖付きブーメラン命中！（アレンジと言っても大きさと、色変えただけだから実際まんまコピペと同じ。まぁちゃんと内容理解してるから今回は許して♥）
おわりに
書き終わって思ったけど、この記事全然参考にならなくね？ただの自己満で草。まぁ、zennの記事はこれからもこんな感じで自己満オ〇ニー記事しか書きません！
最後に
脳死コピペばっかするな！しっかりドキュメントと記事読め！
↑↑↑自分への戒めです。あざした。
参考
Discussion