animation-name
animation-name プロパティは、単一または複数のアニメーションを呼び出すために使用します。
プロパティの詳細
- 値
- none, アニメーションの名前
- 初期値
- none
- 対象
- すべての要素、::before, ::after 疑似要素
- 継承
- しない
- CSS レベル
- CSS 3
値の詳細
- none
- 何も実行されません。アニメーションを非アクティブ化します。
- アニメーション名
- 任意の文字列を指定します。最初の文字は記号ではなく英数字を指定することをおすすめします。
サンプル
html
<div class="box1">
<p>アニメーションのテスト</p>
</div>CSS
div#box1 {
animation-name: animation_01;
animation-duration: 2s;
animation-iteration: ease;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-delay: 0s;
overflow: hidden;
}
@keyframes animation_01 {
0% {
width: 10px;
height: 10px;
background-color: #eeeeee;
position: relative;
left: 0px;
}
100% {
width: 200px;
height: 100px;
background-color: #aaaaaa;
position: relative;
left: 300px;
}
}