animetionのkeyframesを途中から再生する
丸い画像をいくつか並べて、上から下に動かすanimationをcssで作ったよ。
でも最初から、丸い画像が全部出ている状態にしたいけど、どうやったらいいんだろう？
animation-delayにマイナスの値をつける
調べていたところ、
animation-delay: -1s;など、animation-delayに負の値をつけると、
アニメーションが途中から再生できる！ということを知りました。これは驚きでした。
絶対配置でそれぞれの画像を配置とかではなく、そんなやり方なんだと！
@keyframes round {
0% {
transform: translate(0, 0);
opacity: 1;
}
99% {
transform: translate(0, 1900px);
opacity: 1;
}
100% {
transform: translate(0, 1900px);
opacity: 0;
}
}
.top-pic__group span.is-done:nth-child(1) {
animation: round 35s linear -1s infinite;
}
.top-pic__group span.is-done:nth-child(2) {
animation: round 35s linear -6.5s infinite;
}
.top-pic__group span.is-done:nth-child(3) {
animation: round 35s linear -12s infinite;
}transform: translate(0, 1900px);
こちらのコードで、上から下に画像を移動できます。
画像をそれぞれnth-childで指定して、animation-delayをマイナスにします。
こうすることによって、@keyframesが途中から再生できました！
.top-pic__group span.is-done:nth-child(1) {
animation: round 35s linear -1s infinite;
}
.top-pic__group span.is-done:nth-child(2) {
animation: round 35s linear -6.5s infinite;
}
.top-pic__group span.is-done:nth-child(3) {
animation: round 35s linear -12s infinite;
}
keyframes
キーフレームは、見ての通りアニメーションの開始から終わりまで
%を使って、時間軸を設定できます。
下記の例だと、0%から99%までの時間で、translateで縦軸の1900pxまで移動させています。
@keyframes round {
0% {
transform: translate(0, 0);
opacity: 1;
}
99% {
transform: translate(0, 1900px);
opacity: 1;
}
100% {
transform: translate(0, 1900px);
opacity: 0;
}
}よく使うanimationプロパティ７選
animation-name
animation-nameは、キーフレームで設定するアニメーションの名前をつけます。
「keyframes」とanimationプロパティ、順番はどちらが先でも大丈夫なようです。
.top-pic__group {
animation-name: round;
}
@keyframes round {
0% {
transform: translate(0, 0);
opacity: 1;
}
100% {
transform: translate(0, 1900px);
opacity: 0;
}
}animation-duration
animation-durationは、アニメーションの開始から終了までの時間。
animation-duration: 35s;animation-timing-function
animation-timing-functionは、アニメーションの動きの加速度を設定できます。
| ease | 規定値。最後にゆっくりになる |
| ease-in | ゆっくりはじまり、最後に速くなる |
| ease-out | 速くはじまり、最後にゆっくりになる |
| ease-in-out | ゆっくりはじまり、途中はやくなり、最後にゆっくりになる |
| linear | 一定の速さ |
↓下記の例だと、一定の速度で表示。
animation-timing-function:linear;animation-delay
アニメーションを開始させるまでの時間。（遅らせる時間）
animation-delay: 1s;冒頭にも書いたとおり、animation-delayでマイナス設定をすると
キーフレームの途中から再生できる。
animation-delay: -6.5s;animation-iteration-count
アニメーションを繰り返す回数。
↓無限に繰り返す場合
animation-iteration-count: infinite;↓5回の場合
animation-iteration-count: 5;animation-fill-mode
animation-fill-modeは、アニメーションの最初と最後のスタイルの設定ができます。
| none | 規定値。最後の状態を維持しない。 |
| forwards | アニメーションの最後の状態を維持。 |
| backwards | アニメーションの開始前の状態に戻る。 |
animation
animationプロパティで、まとめて一括に指定できます。（ショートハンド）
順番は特に決まっていないそうです。ただ、
「animation-duration」と「animation-delay」だけ順番が決まっています。
①「animation-duration」②「animation-delay」
.top-pic__group {
animation: round 35s linear -6.5s infinite;
}まとめ
- animetionのkeyframesは、時間軸で動きをつけられる。
- animetionのkeyframesで、途中から再生したい場合、animation-delayを負の値にする。
- ショートハンドで一括指定する場合は、animationプロパティを使う。
①「animation-duration」と②「animation-delay」だけ順番が決まっていて、あとは特にない。
