東京都府中市のWEB制作会社Maromaroのブログです

  • TOP
  • Web制作
  • 覚えよう!よく使うアニメーションのエフェクト名 | web制作会社 Maromaro Blog

2022.03.22

chie

覚えよう!よく使うアニメーションのエフェクト名

  • このエントリーをはてなブックマークに追加

こんにちは。MaromaroのChieです。

Webサイトをリッチにする方法の一つに、CSSアニメーションやjsアニメーションなどがありますが、どんな動きをするのか相手に伝えるときに、「あーこれなんて言う動きなんだっけ」を少しでも少なくして、スムーズに進めたいですよね。
今回は、よく使われるアニメーションのエフェクト名をまとめました。

名称一覧

フェードイン ‎要素が徐々に現れてくる
フェードアウト 要素が徐々に消えていく
ズームイン ‎要素が徐々に拡大していく
ズームアウト ‎要素が徐々に縮小していく
スライドイン ‎要素が上下左右のいずれから移動しながら現れる
スライドアウト ‎要素が上下左右のいずれから移動しながら消える
スライドアップ 上方向に移動しながら要素が現れる
スライドダウン 下方向に移動しながら要素が現れる
ポップアップ スライドアップしながらフェードイン
フェードアップ フェードインとスライドインを組み合わせたもの
ワイプ 要素Aが斜め上下左右から丸形・星形などの様々な形で要素を切り替え、
要素Bに替わること
スイペル 要素を横回転させる
チルト 要素を縦回転させる
シェイク 要素が小刻みに震える表現
スピン 要素をクルクル回転させる

よく使うアニメーションサンプル

フェードイン

  • RESULT
  • HTML
  • CSS
  • JS
  • コピー
    
    <div class="sample01"></div>
    
  • コピー
    
    .sample01 {
      background: linear-gradient(to right, #41dfd2 0%,#1f92ab 100%);
      border-radius: 10px;
      max-width: 350px;
      height: 250px;
      opacity: 0;
      animation: 3s fadeIn forwards;
      animation-iteration-count: infinite;/* リピート */
    }
    .sample01.fadeIn.is-animated {
      animation: fadeOut 0.6s cubic-bezier(0.3, 1, 0.5, 1) 1 forwards;/* なめらかに */
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
  • コピー
    
    

フェードアウト

  • RESULT
  • HTML
  • CSS
  • JS
  • コピー
    
    <div class="sample02"></div>
    
  • コピー
    
    .sample02 {
      background: linear-gradient(to right, #41dfd2 0%,#1f92ab 100%);
      border-radius: 10px;
      max-width: 350px;
      height: 250px;
      opacity: 0;
      animation: 3s fadeOut forwards;
      animation-iteration-count: infinite;/* リピート */
    }
    .sample02.fadeOut.is-animated {
      animation: fadeOut 0.6s cubic-bezier(0.3, 1, 0.5, 1) 1 forwards;/* なめらかに */
    }
    @keyframes fadeOut {
      from { opacity: 1; }
      to { opacity: 0; }
    }
    
  • コピー
    
    

ズームイン

  • RESULT
  • HTML
  • CSS
  • JS
  • コピー
    
    <div class="sample3"></div>
    
  • コピー
    
    .sample3 {
      background: linear-gradient(to right, #41dfd2 0%,#1f92ab 100%);
      border-radius: 10px;
      max-width: 350px;
      height: 250px;
      opacity: 0;
      animation: 3s zoomin forwards;
      animation-iteration-count: infinite;/* リピート */
    }
    .sample3.zoomin.is-animated {
      animation: zoomIn 0.6s cubic-bezier(0.3, 1, 0.5, 1) 1 forwards;/* なめらかに */
    }
    @keyframes zoomin {
      0% {
        transform: scale(0.8);
        opacity: 0;
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }
    
  • コピー
    
    

ズームアウト

  • RESULT
  • HTML
  • CSS
  • JS
  • コピー
    
    <div class="sample4"></div>
    
  • コピー
    
    .sample4 {
      background: linear-gradient(to right, #41dfd2 0%,#1f92ab 100%);
      border-radius: 10px;
      max-width: 350px;
      height: 250px;
      opacity: 0;
      animation: 3s zoomOut forwards;
      animation-iteration-count: infinite;/* リピート */
    }
    .sample4.zoomOut.is-animated {
      animation: zoomOut 0.6s cubic-bezier(0.3, 1, 0.5, 1) 1 forwards;/* なめらかに */
    }
    @keyframes zoomOut {
      100% {
        transform: scale(0.8);
        opacity: 1;
      }
      0% {
        opacity: 0;
        transform: scale(x0.8);
      }
    }
    
  • コピー
    
    

スライドイン

  • RESULT
  • HTML
  • CSS
  • JS
  • コピー
    
    <div class="sample5"></div>
    
  • コピー
    
    .sample5 {
      background: linear-gradient(to right, #41dfd2 0%,#1f92ab 100%);
      border-radius: 5px;
      max-width: 400px;
      height: 250px;
      opacity: 0;
      animation: 3s slideIn forwards;
      animation-iteration-count: infinite;/* リピート */
    }
    .sample5.slidein.is-animated {
      animation: slideIn 1s cubic-bezier(0.3, 1, 0.5, 1) 1 forwards;/* なめらかに */
    }
    @keyframes slideIn {
      0% {
        transform: translateX(150px);
        opacity: 0;
      }
      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }
    
  • コピー
    
    

スライドアウト

  • RESULT
  • HTML
  • CSS
  • JS
  • コピー
    
    <div class="sample6"></div>
    
  • コピー
    
    .sample6 {
      background: linear-gradient(to right, #41dfd2 0%,#1f92ab 100%);
      border-radius: 5px;
      max-width: 400px;
      height: 250px;
      opacity: 0;
      animation: 3s slideOut forwards;
      animation-iteration-count: infinite;/* リピート */
    }
    .sample6.slideOut.is-animated {
      animation: slideOut 1s cubic-bezier(0.3, 1, 0.5, 1) 1 forwards;/* なめらかに */
    }
    @keyframes slideOut {
     0% {
        transform: translateX(0);
        opacity: 1;
    }
      100% {
        transform: translateX(150px);
        opacity: 0;
      }
    }
    
  • コピー
    
    

まとめ

スイペルやチルトは一般的な用語ではないのですが、覚えておくと動きを説明するときに「要素を縦回転させるチルトというアニメーションはどうでしょうか?」なんてちょっとやり手な感じで説明もできますね^^

アニメーション名はまだまだたくさんありますが、基本の名称だけでも覚えておくとよいと思います!

  • このエントリーをはてなブックマークに追加