1.animation
animationプロパティは”transition”の時もあったように一括指定できるプロパティです。
セレクター{
animation: 値;
}ボタンのon / offで切り替わります
boxA
on/ off
/*keyframesの設定*/
@keyframes anime{
100%{
width: 300px;
background: linear-gradient( to right, pink, blue);
color: #fff;
}
}
/*アニメーションの設定*/
.boxA{
animation-name: anime; /*keyframesの名前は"animation"*/
animation-duration: 1s; /*アニメーションの時間は1秒*/
animation-delay: .5s; /*0.5秒後にアニメーションを開始する*/
animation-iteration-count: 5; /*アニメーションを5回繰り返す*/
animation-fill-mode: forwards; /*再生後はその位置に留まる*/
animation-timing-function: linear; /*アニメーションが"linear"で動く*/
animation-direction: alternate; /*アニメーション終了時に折り返してくる*/
}ここまででてきたプロパティを長々と書き連ねましたがなかなかボリューミですね(笑)
それを一括指定で書くと…
ボタンのon / offで切り替わります
boxB
on/ off
/*keyframesの設定*/
@keyframes anime{
100%{
width: 300px;
background: linear-gradient( to right, pink, blue);
color: #fff;
}
}
/*アニメーションの設定*/
.boxB{
animation: anime 1s .5s 5 forwards linear alternate;
}なんという事でしょう。あの長々していたコードがこんなに短く！
とても楽です。
注意点はtransitionプロパティの時と同じで時間指定をする場合、後に書いた方が”delay”になることに気をつけましょう。
以下にアニメーションに関するプロパティの記事をまとめましたのでよろしければどうぞ！
2.まとめ
animation まとめ
- アニメーションに関するプロパティをまとめて書く事ができる
- “animation-duration”と”animation-delay”を同時に指定する場合後に書いた方が”animation-delay”になる
セレクター{
animation: 値;
}
コメント