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・jQuery】左から右に流れるようなテキストアニメーションを実装する方法

更新日:2022.09.09
6047
HTMLCSS プログラミング

横スライドメニューをhtml・CSSのみで実装【JS不要簡単】

2020.04.12
1973
HTMLCSS

CSSでダウンロードしたフォントを読み込む方法【@font-faceを使おう】

2023.10.20
191
HTMLCSS プログラミング

【簡単CSS】横・縦スクロールバーを非表示にする方法【Chrome・Safari・Firefox・IE・Edge対応】

2022.03.15
3660