animation-iteration-count
animation-direction プロパティは、アニメーションの繰り返し再生回数を指定します。
プロパティの詳細
- 値
- infinite, 数値
- 初期値
- 1
- 対象
- すべての要素、::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: 10;
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;
}
}