zukucode
主にWEB関連の情報を技術メモとして発信しています。

CSS 上下にアニメーションする要素を作成する

上下にアニメーションする要素を作成する方法を紹介します。

完成形

以下のようなイメージです。

上下に移動する要素をCSSのスタイルのみで作成します。

<style>
.animated {
  animation: move-y .5s infinite alternate ease-in-out;
  display: inline-block;
  color: red;
}
@keyframes move-y {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(10px);
  }
}
</style>
<a>以下をクリック<span class="animated">↓↓</span></a>

アニメーションの作成

move-yという名前でアニメーションを作成します。

translateYで要素を指定した位置まで移動させることができます。

これをアニメーションで繰り返すことにより、上下に動く要素を作成できます。

<style>
@keyframes move-y {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(10px);
  }
}
</style>

アニメーションの適用

animationのスタイルを適用します。

display: inline-blockはインライン要素をアニメーションさせるために必要になります。

<style>
.animated {
  animation: move-y 0.5s infinite alternate ease-in-out;
  display: inline-block;
}
@keyframes move-y {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(10px);
  }
}
</style>

animationの設定値を1つづつ解説します。

move-yでアニメーションの名称を指定して、0.5sでアニメーションを0.5秒かけて実行するように指定しています。

infiniteでアニメーションの動作が無限に繰り返すようにしています。

alternateを指定すると、アニメーションがtoまで達したあと、fromに戻るのではなく、tofromのアニメーションを実行してfromの状態に戻ります。

以下はalternateを指定しない状態の動作です。tofromのアニメーションが実行されていないことが確認できます。

ease-in-outを指定すると、アニメーションの速度を調整できます。

通常はfromtoの状態に一定の速度でアニメーションが行われますが、ease-in-outを指定した場合は、最初に高速で動作して、後半はゆっくりした動作になります。

これにより自然な形のアニメーションを実行することができます。

以下はease-in-outを指定しない状態の動作です。アニメーションの動作に違和感を感じると思います。

WEBページのUI部分には自然な形に見えるease-in-outを使用することが多いです。



関連記事