【CSS】見てて飽きない!振り子みたいにクネクネ動くアニメーション!

こんにちは!ラクです。

この記事では、「振り子のようなアニメーション」の作り方を解説しようと思います!

動きがめちゃくちゃ面白いので一度読んでみてください♪

振り子みたいなアニメーション

では、まず完成形を見て下さい!

See the Pen ExKyGbE by ラク (@raku_gurafiri) on CodePen.

面白いでしょ?

コードを見て何がなんだか分からない人もいると思いますが、一つずつ理解したらとても簡単なので、諦めずに頑張って下さい!

この動きが完成するまで流れ

まずは、完成までの流れを解説します。

手順1
HTMLで点を8個div要素で作る
手順2
それらを一つのdiv要素で囲う
手順3
8個の点を横並びにする
手順4
点を横に一往復スイングさせるアニメーションを作る
手順5
一つ一つの点に微妙に一往復する時間を変える
手順6
完成

大体の流れは掴めましたか?

この中で、ポイントとなるのはマーカーを引いた2つなので、この2つを解説していきます!

一往復スイングさせるアニメーション

このアニメーションは、こう作ります。

@keyframes swing {
  0%{
   transform: translateY(0);
  }
  25%{
    transform: translateY(15px);
  }
  50%{
    transform: translateY(0);
  }
  75%{
    transform: translateY(-15px);
  }
  100%{
    transform: translateY(0);
  }
}

このアニメーションが1秒で実行される場合、

「開始0.25秒で上に15px移動」

「開始0.5秒で元の位置に戻る」

「開始0.75秒で下に15px移動」

「開始1秒で再び元の位置に戻る」

これで、一往復のアニメーションの完成です!

一往復の時間を微妙ずらす

それぞれの点の往復時間をずらす方法はとても簡単です。

.dot:nth-child(1) {
  animation: swing 1s infinite linear;
}

まず、「.dot:nth-child(○)」で、○番目の点を指定しています。

そして、animationの「1s」の部分を1番目の点から8番目の点まで、0.05sずつ遅くしていきます

これで、完成です!!

仕組みを知るとなかなか簡単だったんではないでしょうか?

これからも、CSSアニメーションの解説記事を書こうと思っているので、良かったらまた覗いて下さい!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です