animation-nameでアニメーション名をつける【CSS】

animation-nameプロパティは、アニメーションを適用する対象を指定するプロパティです。

{animation-name: アニメーション名;}

アニメーションの動きは@keyframesで指定しますが、そのためにはアニメーション名も対象要素に指定する必要があります。

.animation-ex {
　animation-name: ex-animation;
}

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

上の赤いボックスには「ex-animation」というアニメーション名を指定しており、@keyframesでアニメーション名を参照して動きをつけています。