@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;}
}
0%{width: 50px;height: 70px;}
100%{width: 200px;height: 70px;}
}
上の赤いボックスにanimation-nameプロパティで指定した「ex-animation」というアニメーション名をkeyframes規則で参照し、キーフレーム、変化させるプロパティと値を記述しています。
幅が50pxから200pxに変化するアニメーションです。
animation-nameプロパティの他にもanimation-durationプロパティなども指定しています。
Leave a Comment