CSS Animationに関する良記事・便利なツール

ウオトミズ(UOTOMIZU)の中の人

 

概要

CSS Animationでシンプルな実装ができるようになっただけで、CSS Animationを理解した気にならないために、さわりをまとめようと思ったのだけど、すでに良記事があってこれ以上素晴らしくまとめられる気がしなかったから、ブックマークしておく。時間の節約なり。世の中には教えることに優れた人がいるのだなと。

2記事で十分な印象。あとは芋づる式に記事を辿れば良いかなと。その上でチートシートを下記にまとめる。

各Transitionプロパティーの表

プロパティー名 初期値
transition 各プロパティの値を指定(transition-property, transition-duration, transition-timing-function, transition-delayの順) 各プロパティの値の初期値
transition-property all / none / プロパティ名 all
transition-duration 時間指定(1秒=1s) 0
transition-timing-function ease / linear / ease-in / ease-out / ease-in-out / cubic-bezier関数 ease
transition-delay 時間指定(1秒=1s) 0

各Animationプロパティーの表

プロパティー名 初期値
animation 各プロパティーを順に入力(animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-directionの順番) 各プロパティーの初期値
animation-name none / @keyframeで指定した名前 none
animation-duration 時間指定(一秒=1s) 0
animation-timing-function ease / linear / ease-in / ease-out / ease-in-out / cubic-bezier関数 ease
animation-delay 時間指定(一秒=1s) 0
animation-iteration-count infinite / 数値(単純に回数を指定) 1
animation-direction normal / alternate normal
animation-fill-mode none / forwards / backwards / both none
animation-play-state running / paused running

仕様書・ツール

cubic-bezier関数に関しては、Chromeでなければ、CSS cubic-bezier Builderという便利なツールもある。

 

最後にHTML5とCSS Animationを使って、動物を再現してみた。

 

 

習得した知識の練習がてら。うさぎ可愛い。こういうキャラクターをHTMLとCSSのみで書くのは本来非効率的なんだけど、他のエンジニアさんがやっていて私も一回したくなった。普段使わないコードは記憶が結構曖昧になってしまうので、復習になったし、知らないCSSの記述方法も発見できた。時間があるときに遊んでみるのは良いかもしれない。

 

何でもかんでも動かせば騒がしいサイトになるし、見ていて気が散るし、動作は重くなるしで、アニメーションの一番の肝は使い所だ。せっかく実装できるようになっても、センスがなければどことなくダサくなってしまうので、表現の仕方であったり使い所は学び続けないといけない。CSS Animationを効果的に使った素晴らしい表現のサイトがあればブックマークしていこう。

 

 

.
スポンサーリンク

商用利用可な素材配布しています!!

商用利用可なフリー素材ULOCO商用利用可なフリー素材ULOCO