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 プログラミング

iframe内のリンク・formを別タブで開く方法

2021.11.02
826
プログラミング

【htaccess】ディレクトリ配下をドキュメントルート基準にして読ませる方法【テストサイト】

2020.03.25
696
WordPress プログラミング

カスタム投稿タイプで月別・年別アーカイブページが表示されない場合の対処方法

2022.01.13
2414
HTMLCSS プログラミング

【簡単】CSSで数字を縦向き・縦書きにする方法【text-orientation: upright;】

2022.04.06
1081