🔎

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

2 min read

背景

自作のWebアプリのトップページを作る時に、文字列にアニメーションをつけたい。
そこで、手軽にアニメーションを導入できるライブラリを探したところ、これを見つけました。

https://animate.style/
このライブラリに惹かれたポイントは3つあリます。
  1. トップページ上でアニメーションの動きを確かめることができます。
  2. 導入が簡単(5分で導入可能)
  3. 付けたいアニメーションの指定が簡単(Bootstrap感覚でできる)

本題

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

https://github.com/animate-css/animate.css/blob/main/source/_base.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秒〜1.6秒の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貼りたいですが、方法が分からず載せることができません。
もし、方法知っている方いましたら教えてください。