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: アニメーション間隔を開けたい秒数;

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

目次

関連記事

WordPress プログラミング

【簡単】ワードプレスのRSSフィードを取得して、外部サイトに記事一覧を表示する方法

更新日:2020.05.27
2828
プログラミング

映画ターミネーター ニュー・フェイトのあらすじ・感想を解説。2の続編!【最後にネタバレ有り】

2020.03.02
295
HTMLCSS プログラミング

【簡単】HTMLのformでリセットボタンを入れる方法

2022.04.17
547
プログラミング

埋め込み型のフォームメーラーで文字化けしてしまう場合の対処方法

2021.01.05
2272