animation-durationでアニメーション完了までの時間を指定【CSS】

animation-durationプロパティは、アニメーションが開始されてから完了するまでの時間の長さを指定するプロパティです。

{animation-duration: 時間;}

animation-durationプロパティでは、アニメーション1回の時間を単位つき数値で指定します。

次の例では、animation-durationプロパティで10sを指定していますが、これはアニメーションの動きは10秒間であることを示しています。

.animation-ex {
　animation-name: ex-animation;
　animation-duration: 10s;
}

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

上の赤いボックスは、10秒間かけて幅が50pxから200pxまで大きくなります。

ちなみにアニメーションの対象要素にアニメーション名を指定し、@keyframesで動きを指定する必要があります。