CSS レッスン8
アニメーション
transition、@keyframes、transformを使って動きのあるUIを作ろう
CSSアニメーションの基本
CSSだけでスムーズなアニメーションを作ることができます。大きく分けて2つの方法があります：
transition- プロパティの変化を滑らかにする（ホバー時など）@keyframes- 複雑なアニメーションをフレーム単位で定義transform- 回転（rotate）、拡大（scale）、移動（translate）animation- @keyframesアニメーションを適用するプロパティ
transitionでホバーアニメーション
transitionを指定すると、状態の変化がスムーズになります。ボタンにマウスを乗せてみてください。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview@keyframesアニメーション
@keyframesで複雑なアニメーションを定義し、animationプロパティで適用します。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Previewtransformの活用
transformで回転・拡大・移動・傾斜を表現できます。ホバーで変化を確認してみましょう。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview自由に試してみよう
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview