Animate.css
セットアップ

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

DL用

今回は、こちらを使用中

GitHubからダウンロードして、追加

Animate.css
使い方

参考URL

CSS使用例

bounce

  
    HTML
    <p class="test-css-p">bounce</p>

    CSS
    .test-css-p {

      /* コピーした名前 */
      animation: bounce; 

      /* アニメーションの繰り返し回数 */
      /* animation-iteration-count: 1; 1回だけアニメーション */
      /* animation-iteration-count: 2; 2回だけアニメーション */
      /* animation-iteration-count: infinite; 無限にアニメーション */
      animation-iteration-count: infinite;

      /* ease-in-out: 開始と終了がゆっくり */
      /* ease: 開始と終了がゆっくり */
      /* ease-in: 開始がゆっくり */
      /* ease-out: 終了がゆっくり */
      /* linear: 一定の速度 */
      animation-timing-function: ease-in-out;

      /* アニメーション開始時間２秒後 */
      animation-duration: 2s; 
    }
  

  
    HTML
    <h2 class="animate__animated animate__infinite animate__bounce animate__delay-5s">bounce</h2>
    <h2 class="animate__animated animate__infinite animate__flash">flash</h2>
    <h2 class="animate__animated animate__infinite animate__fadeIn">fadeIn</h2>
    <h2 class="animate__animated animate__infinite animate__fadeOut">fadeOut</h2>
    <h2 class="animate__animated animate__infinite animate__zoomIn">zoomIn</h2>