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