Written by Kasumi

Animate.cssでアニメーション表示を遅延(delay)させる方法

Animate.cssを使っていてアニメーションが表示されるタイミングをずらしたい。

このような悩みを解決します。

本記事ではCSSを使って、Animate.cssのアニメーションを遅延させる方法について解説します。

実装サンプル

See the Pen
Animate.css
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

テキストに書いてある指定秒数でフェードイン表示が遅延されてるのがわかります。

実装方法は以下の通りです。

animation-delayプロパティを付与

.delay {
  animation-delay: 0.4s;
}

アニメーションを遅延させるにはanimation-delayプロパティを使います。

Animate.cssのクラスが付与されてる遅延させたいhtml要素に以下プロパティを付与。

animation-delay: 遅延させたい秒数s;

以上で遅延が実行されます。

まとめ

アニメーションの間隔を変更したい場合はanimation-durationプロパティを付与します。

animation-duration: アニメーション間隔を開けたい秒数;

以上で解説を終わります。

目次

関連記事

HTMLCSS jQuery

【CSS】高さ100vh指定時のスマホステータスバーを除く方法

更新日:2022.09.09
2652
HTMLCSS

【コピペ用】CSSでへこむボタンを作成する方法

2022.06.11
3295
WordPress プログラミング

【wordpress】先頭固定記事かどうかを判別して条件分岐する方法

2021.10.26
1273
HTMLCSS プログラミング

【簡単CSS】videoタグを使って動画を背景に設定する方法

2022.03.12
13011