@keyframesでアニメーションの動きを指定【CSS】

@keyframesはアニメーションの動きを指定する規則です。

@keyframes アニメーション名 {
キーフレーム{変化させるプロパティ：値;}
}

値の指定方法

animation-nameプロパティで指定したアニメーション名、キーフレーム、変化させるプロパティ、値を指定します。

また、animation-durationプロパティによる時間の指定は必須です。

アニメーション名はanimation-nameプロパティで指定したもの。

この名前が付与されている要素のプロパティを変化させます。

キーフレームとは、アニメーション全体における経過点のことで、%値を指定します。

たとえば10秒のアニメーションだとして、30%は3秒時点、70%は7秒時点を示すということです。

また、開始点と終了点を「from」と「to」で指定することもでき、fromは0%、toは100%と同値です。

キーフレームごとに変化させるプロパティとその値も指定します。

以下、アニメーションの使用例です。

@keyframes ex-animation {
　0%{width: 50px;height: 70px;}
　100%{width: 200px;height: 70px;}
}

上の赤いボックスにanimation-nameプロパティで指定した「ex-animation」というアニメーション名をkeyframes規則で参照し、キーフレーム、変化させるプロパティと値を記述しています。

幅が50pxから200pxに変化するアニメーションです。

animation-nameプロパティの他にもanimation-durationプロパティなども指定しています。