はじめに
cssのアニメーション便利ですよね。
ただ、cssのアニメーションってループ時の場合、ディレイの間隔って調整が難しいですよね。。。
animation-delayって初回の待機時間しか効かないのでループ時の2回以降の間隔って@keyframes内に待機時間も含めた形で作る必要があるからなんですよね。
このプロパティが存在していれば話が早いんですが、そうもいかないanimationプロパティ悩ましい。。。
keyframesに待機時間も含めて対応
以下はCSS-TRICKSの記事から拝借させていただいたものですが、@keyframesに待機時間を含めております。
(20%〜100%以降が待機時間になります。詳しくはCSS-TRICKSの元記事にてご確認いただければと思います。)
See the Pen rLdxVZ
ただ、直感的ではないですよね。。。
ちょっと入り組んだアニメーション定義したい場合にこんなん一個一個書いてらんない。。。
解決方法
Wait! Animateという素晴らしいサービスがあります。
CSSの場合は以下のサイトにてプロパティをぽちぽちして書き出されたコードを使用すればよいです！
SCSSの場合はmixinを使ってよきにkeyframesを定義する感じです！（mixinの使用方法はWait! Animateをご確認くださいませ。）
おまけ
dart-sass版
といってもmath.divに書き変えたぐらいしか変更していないですが。。。
wait-animate.scss
@use 'sass:math';
// @see http://waitanimate.wstone.io/#!/
@mixin waitAnimate($options: ()) {
$options: map-merge(
(
animationName: waitAnimate,
duration: 1,
waitTime: 0,
timingFunction: linear,
iterationCount: infinite,
),
$options
);
$name: map-get($options, animationName);
$kf: map-get($options, keyframes);
$kfLength: length($kf);
$duration: map-get($options, duration);
$waitTime: map-get($options, waitTime);
$timingFunction: map-get($options, timingFunction);
$iterationCount: map-get($options, iterationCount);
$counter: 1; // index of 'each'
@keyframes #{$name} {
@each $frame, $prop in $kf {
#{ math.div($frame * $duration, $duration + $waitTime) + 0% } {
@each $k, $v in $prop {
#{$k}: #{$v};
}
}
// if last in loop and waitTime is not 0, add the last frame as 100% (this is what creates the pause)
@if $counter == $kfLength and $waitTime > 0 {
100% {
@each $k, $v in $prop {
#{$k}: #{$v};
}
}
}
$counter: $counter + 1;
}
}
%#{$name} {
animation: #{$name} #{$duration + $waitTime}s #{$timingFunction} #{$iterationCount};
}
}
と、あまりループのcssアニメーション待機時間を調整したいなどのニーズはあまりないかもですが
(私自身過去に1度ぐらいしかなかった。。。)
誰かのお役に立てれば幸いです。
↧