2022.03.22

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

こんにちは。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;
  }
}