animationを覚えよう！第一回：基本中の基本を覚える

2021.02.07

好きな四字熟語は一期一会です。とらりんです。

さてさて、今回はcssのanimationについて。

実はわたくし、animationの知識がほとんどなく、使えておりません。

勉強しないと・・・と思い続けて早幾年。

このまま出来ませんと言い続けるのは恥ずかしいし悔しい。

ここらで一念発起、勉強しつつ、得た知識をまとめていこうと思います。

一からコツコツ、少しずつ。今回はシリーズ一回目です。

animationとは

animationは要素に動き（アニメーション）を付けるcssのプロパティ。

MDNのサイトが分かりやすいかと思います。

一昔前はjsで設定していたような事がcssでできるように。

（jsが超苦手な私は元々やってなかったのですが。。。）

使いこなせれば表現の幅が無限に広がりますね。

animationを調べていてtransitionと似ているなと思ったのですが、

transitionは動きがシンプルでアクションきっかけで使いやすい。

animationは動きが複雑にできて自動的である。

と、ざっくりですが違いがあるような気がしました。

この違いについてはまた改めて取り上げたいと思っております。

私が見つけたanimationを使っているサイトをご紹介。

1）海藻がふわふわ揺れている

2）魚が泳いでる

3）泡が下から上へ登っている

紹介した箇所以外にもいくつか使われていて、全体的にふわふわ感があって水中の感じがよく出てますね。

しかしとっても懐かしい。小学生の時よく食べたなー。

キティちゃんが歩いている

お散歩中なんですかねえ。

他にanimationかな？と思ったらアニメーションgifだった。もありますね。

書いて覚えるという事で、animation関連のプロパティ一覧を表にしました。

animation-name	要素に適用される1つまたは複数のアニメーションを設定初期値：none
animation-duration	1回のアニメーション周期が完了するまでの所要時間初期値：0s
animation-timing-function	アニメーションがそれぞれの周期の中でどのように進行するか初期値：ease
animation-delay	アニメーションをいつ開始するか初期値：0s
animation-iteration-count	停止するまでにアニメーション周期が再生される回数初期値：1
animation-direction	アニメーション再生の向きを順方向、逆方向、前後反転のいずれにするか初期値：normal
animation-fill-mode	CSS アニメーションの実行の前後にどう対象にスタイルを適用するか初期値：none
animation-play-state	アニメーションが実行中か停止中か初期値：running