ども、六崎です。

 

ついに我が家にもNintendo Switchが導入されました！（私が買ったのではないw
本体と共にスマブラを買ったのですが、購入後2日で全キャラ出しました（私はやってないw

 

ちなみに私はドンキーコングをこよなく愛しています💕
細かくちょこちょこ動くよりボコボコに殴って吹っ飛ばしたい系です。
次によく使うのはディディーコング、キングクルール…
あれ、ドンキーキャラしか使わないwww

 

本題いきまーす！（笑）

今回から3回に分けてcss3のアニメーションについて書いていこうと思います。

 

cssでアニメーションをマスターしよう！

• transitionとanimationの違い
• transitionを使ってみよう
• animationを使ってみよう

 

…というコースでいきます。

 

 

 

まず、css3でアニメーションを実装するには2つの方法があります。
それがtransitionとanimationです。

 

私もあまり意識はしてなかったのですが、簡単に違いを挙げると
transition = 簡単なアニメーションを実装できる
animation = 詳細なアニメーションを実装できる
だと思います。

 

 

transitionについて

transitionを用いるのは単調な動きで、例えば:hoverしたら色が変わる、位置が移動する等々に用いられる事が多いのではないでしょうか。
あと実行後、元のプロパティ値に戻ります。

 

 

animationについて

animationは詳細なアニメーションを作るときにむいていて、例えば色の変更や透明度、サイズの変更など複数のアニメーションを同時に操作する事が簡単にできます。
タイミングの操作をkeyframesで行いますが、JSやjQueryを使うより簡単で個人的にはanimation&keyframes最強説があります。

 

 

バインバイーンって動くように、細かく設定してます。
これ、心折れるんです（動きが変でも意見は聞きませんw

 

ちなみにデフォルトだと、初期値に戻りません。
keyframesの0%→100%に動いてくれたら、即0%に戻りますw
戻すやり方もあるのですが、それは次に紹介した時に。

 

 

次週以降transitionとanimationについて掘り下げてご紹介していきます！
（ひと記事にすると長くなるんだよー、分けさせてくれよー…という、心の声

 

ではっ！