CSSアニメーション 様々なデザインの実装 –おしゃれなボックス– #4

/* `@keyframes`ルールは、アニメーションのシーケンスを定義します。
   `fluidrotate`はこのアニメーションの名前で、.anime-fluidrotate`クラスで参照されます。 */
@keyframes fluidrotate {
  
  /* アニメーションの開始と終了のステート（0%と100%）。
     これにより、アニメーションがループする際にシームレスに見えるように設定されています。 */
  0%, 100% {
    border-radius: 44% 56% 61% 39% / 69% 42% 58% 31%;
  }

  /* アニメーションの14%完了時のステート */
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }

  /* アニメーションの28%完了時のステート */
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }

  /* アニメーションの42%完了時のステート */
  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }

  /* アニメーションの56%完了時のステート */
  56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }

  /* アニメーションの70%完了時のステート */
  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }

  /* アニメーションの84%完了時のステート */
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
}

/* `.anime-fluidrotate`はクラスセレクタで、このクラスを持つHTML要素に以下のスタイルを適用します */
.anime-fluidrotate {
  /* `animation`プロパティはアニメーションを指定するためのものです */

  /* `fluidrotate`はアニメーションの名前です。この名前は後で`@keyframes`で具体的なアニメーションの内容を定義する際に使います */
  animation-name: fluidrotate;

  /* `30s`はアニメーションの持続時間を示しています。これにより、アニメーションは30秒かけて完了します */
  animation-duration: 30s;

  /* `ease`はアニメーションのタイミング関数を指定します。この関数はアニメーションの進行速度をコントロールします。 
     ここでの`ease`は、アニメーションがゆっくり開始し、その後速度を上げ、ゆっくり終わることを意味します */
  animation-timing-function: ease;

  /* `0s`はアニメーションの開始遅延を指定します。ここでは遅延なし（0秒後に開始）を示しています */
  animation-delay: 0s;

  /* `infinite`はアニメーションの反復回数を指定します。この場合、アニメーションは無限回繰り返されます */
  animation-iteration-count: infinite;
}

.anime-fluidrotate {
  animation: fluidrotate 30s ease 0s infinite;
}