animation-delayプロパティは、ページが表示されてからアニメーションが開始するまでの時間を指定するプロパティです。
{animation-delay: 時間;}
animation-delayプロパティでは、アニメーションが開始するまでの時間系単位と数値で指定します。
関連記事
『CSSにおける長さ・大きさ・角度・時間の単位について【CSS】』
次の例では、animation-delayプロパティで2sを指定していますが、これはページが表示されてからアニメーションが始まるまで2秒であることを示しています。
.animation-ex {
animation-name: ex-animation;
animation-duration: 10s;
animation-delay: 2s;
}
animation-name: ex-animation;
animation-duration: 10s;
animation-delay: 2s;
}
@keyframes ex-animation {
0%{width: 50px;height: 70px;}
100px{width: 200px;height: 70px;}
}
0%{width: 50px;height: 70px;}
100px{width: 200px;height: 70px;}
}
上の赤いボックスは、ページが表示されてから2秒後にアニメーションが開始し、10秒間かけて幅が50pxから200pxまで大きくなります。
関連記事
『@keyframesでアニメーションの動きを指定【CSS】』
『animation-nameでアニメーション名をつける【CSS】』
『animation-durationでアニメーション完了までの時間を指定【CSS】』
Leave a Comment