WordPress Design

CSSアニメーション利用法

Animate.css

CDNからanimate.cssを読み込む

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>

HTML記載例

<h1 class="animated infinite bounce delay-2s">Example</h1>

css記載例

.yourElement {
  animation-duration: 3s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

クラスの一覧

動作確認