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の設定値を１つづつ解説します。
move-yでアニメーションの名称を指定して、0.5sでアニメーションを0.5秒かけて実行するように指定しています。
infiniteでアニメーションの動作が無限に繰り返すようにしています。
alternateを指定すると、アニメーションがtoまで達したあと、fromに戻るのではなく、to→fromのアニメーションを実行してfromの状態に戻ります。
以下はalternateを指定しない状態の動作です。to→fromのアニメーションが実行されていないことが確認できます。
ease-in-outを指定すると、アニメーションの速度を調整できます。
通常はfrom→toの状態に一定の速度でアニメーションが行われますが、ease-in-outを指定した場合は、最初に高速で動作して、後半はゆっくりした動作になります。
これにより自然な形のアニメーションを実行することができます。
以下はease-in-outを指定しない状態の動作です。アニメーションの動作に違和感を感じると思います。
WEBページのUI部分には自然な形に見えるease-in-outを使用することが多いです。