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

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

Ads

関連記事

HTMLCSS プログラミング

【CSS】input要素のplaceholderの文字だけサイズを変更する方法

2022.01.10
262
WordPress プログラミング

投稿の一覧ページで、過去記事を一番先頭に持ってくる方法【ワードプレス】

2019.11.29
113
JavaScript プログラミング

【簡単datapicker】選択した日付によってイベントをjQueryで追加する方法

2022.02.27
183
プログラミング

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

2021.01.05
269