animation-duration
animation-direction プロパティは、アニメーション再生1回の時間を指定します。
プロパティの詳細
- 値
- 時間（数値 + s, または ms）
- 初期値
- 0s
- 対象
- すべての要素、::before, ::after 疑似要素
- 継承
- しない
- CSS レベル
- CSS 3
サンプル
html
<div class="box1">
<p>アニメーションのテスト</p>
</div>CSS
div.box1 {
animation-name: animation;
animation-duration: 5s;
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;
}
}