🔎

Animate.CSSのアニメーションディレイ設定

2021/05/12に公開

CSS

HTML

animation

tech

背景

自作のWebアプリのトップページを作る時に、文字列にアニメーションをつけたい。
そこで、手軽にアニメーションを導入できるライブラリを探したところ、これを見つけました。
https://animate.style/
このライブラリに惹かれたポイントは3つあリます。

トップページ上でアニメーションの動きを確かめることができます。
導入が簡単（５分で導入可能）
付けたいアニメーションの指定が簡単(Bootstrap感覚でできる)

本題

３行で構成されている文字列を上から順にアニメーションを付けたいと考えました。
Animate.cssのdelayは１秒間隔１秒〜５秒の遅延機能がデフォルトで用意されています。
しかし、私は０.５秒ずつズレて始めるアニメーションを実装したかったため、どうやれば実装できるか色々調べました。
するとAnimate.CSSのレポジトリ内でこのファイルを見つけました。


.animated.delay-1s {
  animation-delay: var(--animate-delay);
}

.animated.delay-2s {
  animation-delay: calc(var(--animate-delay) * 2);
}

.animated.delay-3s {
  animation-delay: calc(var(--animate-delay) * 3);
}

.animated.delay-4s {
  animation-delay: calc(var(--animate-delay) * 4);
}

.animated.delay-5s {
  animation-delay: calc(var(--animate-delay) * 5);
}

https://github.com/animate-css/animate.css/blob/main/source/_base.cssから引用

このコードを応用して、任意のタイミングでアニメーションを開始できるコードを書いてみました。
例えば、0.5秒〜１.６秒の0.3秒間隔でアニメーションを開始するコードはこれです。

index.html

<ul>
    <li class="animate__animated animate__fadeInRight animate__delay-05s">hoge</li>
    <li class="animate__animated animate__fadeInRight animate__delay-08s">hoge2</li>
    <li class="animate__animated animate__fadeInRight animate__delay-1s">hoge3</li>
    <li class="animate__animated animate__fadeInRight animate__delay-13s">hoge4</li>
    <li class="animate__animated animate__fadeInRight animate__delay-16s">hoge5</li>
</ul>

index.css

.animate__delay-05s {
 animation-delay: calc(var(--animate-delay) * 0.5);
}
.animate__delay-08s {
 animation-delay: calc(var(--animate-delay) * 0.8);
}
.animate__delay-13s {
 animation-delay: calc(var(--animate-delay) * 1.3);
}
.animate__delay-16s {
 animation-delay: calc(var(--animate-delay) * 1.6);
}

これで私がやりたかったことを実装することができました。

最後に、アニメーションの動きを見せるためにPDF貼りたいですが、方法が分からず載せることができません。
もし、方法知っている方いましたら教えてください。

背景

本題

Discussion