webmas.jp

animation-delay プロパティは、アニメーション開始のタイミングを指定するプロパティです。ページ読み込み完了後即再生、遅れて再生、アニメーションの途中から即再生といった指定が可能です。

プロパティの詳細

値

時間（数値 + s, または ms）

初期値

0s

対象

すべての要素、::before, ::after 疑似要素

継承

しない

CSS レベル

CSS 3

サンプル

html

<div class="box1">
<p>アニメーションのテスト</p>
</div>

CSS

div.box1 {
	animation-name: animation;
	animation-duration: 2s;
	animation-iteration: ease;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-delay: 2s;
	overflow: hidden;
}

@keyframes animation {
	0% {
		width: 10px;
		height: 10px;
		background-color: #eeeeee;
		position: relative;
		left: 0px;
	}
	100% {
		width: 200px;
		height: 100px;
		background-color: #aaaaaa;
		position: relative;
		left: 300px;
	}
}

デモ