CSS

@keyframesを設定してみよう

キーフレームを作ってアニメーションの細かい挙動を定義していきます。

  • @keyframes
  • animation-name
  • animation-duration

@keyframes

・まずは@keyframesに好きな名前をつけていきます。今回はわかりやすいようにanimationという名前にしていきます。

・その中にはアニメーション開始から何パーセント経過したときにどうなっていて欲しいかを書いていきます。今回は50%の時点で360度回転しながら200px移動して100%になることにそのまま追加で100px移動するアニメーションを作っていきます。

・0% の地点では変形前と同じスタイルなので、書かなくてもいいのですが、最初の状態を明示しておいても分かりやすいので、変形はしていないという意味で transform: none; としておきましょう。

・次に50% の地点でのスタイルを指定しておきます。50% の地点では右に 200px 移動させてあげて、さらに 360 度回転させたいのでtransform: translateX(200px) rotate(360deg);と書いていけばいいでしょう。

・100% の地点のスタイルも指定していきます。100% ではさらに右に進んで 300px の地点まで移動して 360 度回転したままにしておきたいのでtransform: translateX(300px) rotate(360deg);とすればいいです。

animation-name

・そこまでできたら.animationのほうに animation-name プロパティで @keyframes につけた名前を指定してあげます。@keyframes animation {}と指定したのでanimation-name: animation;と書いていきます。

animation-duration

animation-duration でアニメーションにかかる時間を指定してあげましょう。3秒間かけて変化させたいのでanimation-duration: 3s;とします。

-広告-

 

 






-CSS