animation
animationプロパティは、スタイル間アニメーションを一括指定するプロパティです。animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state の一括指定となります。
プロパティの詳細
- 値
- 各プロパティの初期値
- animation-name: none
- animation-duration: 0s
- animation-timing-function: ease
- animation-delay: 0s
- animation-iteration-count: 1
- animation-direction: normal
- animation-fill-mode: none
- animation-play-state: running
animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state の各値
- 初期値
- 各プロパティの初期値
- 対象
- すべての要素、::before, ::after 疑似要素
- 継承
- しない
- CSS レベル
- CSS 3
サンプル
html
<div class="box1">
<p>アニメーションのテスト</p>
</div>
CSS
div.box1 {
animation: animation 2s ease 0s infinite alternate;
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;
}
}