今回はCSSだけで作る@keyframesのanimation-directionプロパティを使用したCSSアニメーションを4つご紹介します。
animation-direction:normal, reverse, alternate, alternate-reverseの4つを使用して再生方向をカンタンに指定していきます。
こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。
この記事の目次
@keyframesのanimation-directionプロパティでつくるCSSアニメーション4選
1. 【@keyframes&animation-direction:normal】順方向に繰り返すCSSアニメーション
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
POINT
- @keyframesを使いアニメーションで実行されるプロパティと開始から終了までの期間をパーセントで指定
- @keyframesでtransform:translate3dでXYZの移動距離を各時点で指定することで立体的に移動するアニメーションを実現(transformの使い方については【transform完全網羅】hoverで動き出す!transformを網羅できるCSSボタンアニメーション16選)
- @keyframesでbox-shadowを各時点で指定することで画像の影が太陽の動きで変化するような動きを実現
- animation-durationでアニメーションにかかる時間を指定
- animation-timing-function: linearでアニメーションの進行の度合いを指定し、linearで開始から終了までを一定に変化(滑らかなアニメーションになる)するよう指定
- animation-direction: normalでアニメーションの再生方向を指定し、normalで指定した方向へのアニメーションを繰り返すよう指定
- animation-iteration-count: infiniteでアニメーションの繰り返し回数をinfiniteに指定して無限に繰り返すアニメーションを実現
- animation-nameを@keyframeのアニメーションを使用したい要素の中で名前を指定
- display:flexでcontainerの中身をど真ん中に設置
2. 【@keyframes&animation-direction:reverse】逆方向に繰り返すCSSアニメーション
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
POINT
- @keyframesを使いアニメーションで実行されるプロパティと開始から終了までの期間をパーセントで指定
- @keyframesでtransform:translate3dでXYZの移動距離を各時点で指定することで立体的に移動するアニメーションを実現(transformの使い方については【transform完全網羅】hoverで動き出す!transformを網羅できるCSSボタンアニメーション16選)
- @keyframesでbox-shadowを各時点で指定することで画像の影が太陽の動きで変化するような動きを実現
- animation-durationでアニメーションにかかる時間を指定
- animation-timing-function: linearでアニメーションの進行の度合いを指定し、linearで開始から終了までを一定に変化(滑らかなアニメーションになる)するよう指定
- animation-direction: reverseでアニメーションの再生方向を指定し、reverseで指定した逆方向へのアニメーションを繰り返すよう指定
- animation-iteration-count: infiniteでアニメーションの繰り返し回数をinfiniteに指定して無限に繰り返すアニメーションを実現
- animation-nameを@keyframeのアニメーションを使用したい要素の中で名前を指定
- display:flexでcontainerの中身をど真ん中に設置
3. 【@keyframes&animation-direction:alternate】行ったり来たりを繰り返すCSSアニメーション
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
POINT
- @keyframesを使いアニメーションで実行されるプロパティと開始から終了までの期間をパーセントで指定
- @keyframesでtransform:translate3dでXYZの移動距離を各時点で指定することで立体的に移動するアニメーションを実現(transformの使い方については【transform完全網羅】hoverで動き出す!transformを網羅できるCSSボタンアニメーション16選)
- @keyframesでbox-shadowを各時点で指定することで画像の影が太陽の動きで変化するような動きを実現
- animation-durationでアニメーションにかかる時間を指定
- animation-timing-function: linearでアニメーションの進行の度合いを指定し、linearで開始から終了までを一定に変化(滑らかなアニメーションになる)するよう指定
- animation-direction: alternateでアニメーションの再生方向を指定し、alternateでアニメーションが行ったり来たりを繰り返すよう指定
- animation-iteration-count: infiniteでアニメーションの繰り返し回数をinfiniteに指定して無限に繰り返すアニメーションを実現
- animation-nameを@keyframeのアニメーションを使用したい要素の中で名前を指定
- display:flexでcontainerの中身をど真ん中に設置
4. 【@keyframes&animation-direction:alternate-reverse】逆方向から開始して繰り返すCSSアニメーション
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
POINT
- @keyframesを使いアニメーションで実行されるプロパティと開始から終了までの期間をパーセントで指定
- @keyframesでtransform:translate3dでXYZの移動距離を各時点で指定することで立体的に移動するアニメーションを実現(transformの使い方については【transform完全網羅】hoverで動き出す!transformを網羅できるCSSボタンアニメーション16選)
- @keyframesでbox-shadowを各時点で指定することで画像の影が太陽の動きで変化するような動きを実現
- animation-durationでアニメーションにかかる時間を指定
- animation-timing-function: linearでアニメーションの進行の度合いを指定し、linearで開始から終了までを一定に変化(滑らかなアニメーションになる)するよう指定
- animation-direction: alternate-reverseでアニメーションの再生方向を指定し、alternate-reverseでアニメーションが逆方向から開始されて行ったり来たりを繰り返すよう指定
- animation-iteration-count: infiniteでアニメーションの繰り返し回数をinfiniteに指定して無限に繰り返すアニメーションを実現
- animation-nameを@keyframeのアニメーションを使用したい要素の中で名前を指定
- display:flexでcontainerの中身をど真ん中に設置
【初心者向け】失敗しないプログラミングTIPS
そもそもWebデザインの基礎がわからない。。
そんなあなたには『Udemy』
未経験からWeb制作で月50万稼げるようになったUdemy教材3選
でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたには『ProEngineer』
完全無料で一人前のエンジニアになれるプログラミングスクール【ProEngineer】