【コピペで使用OK！】CSSで簡単に実装できるアニメーション22選

2024年8月22日2024年8月27日

misa

こんにちは、ウェブデザインパレットのmisaです。

今回は、HTMLとCSSで簡単に実装できるアニメーションをご紹介します。

コピペOKなので、ぜひアレンジして使ってみてくださいね＾＾

アニメーションは、画像ではなくテキストでもお使いいただけます。

フェードイン

オブジェクトが徐々に表示されるアニメーション。

HTML

<img class="fadeIn-img" src="image.jpg" alt="ユニコーン">

CSS

.fadeIn-img {
  opacity: 0;
  animation: fadeIn 4s ease-in-out infinite;
}

@keyframes fadeIn {
  0%, 100% { 
    opacity: 0;
  }
  50% { 
    opacity: 1;
  }
}

misa

アニメーションを繰り返したくない場合は、infiniteの部分を「forwards」（アニメーション後は、最後のキーフレームのスタイルを適用）に変更してみてくださいね。

フェードアウト

オブジェクトが徐々に消えるアニメーション。

HTML

<img class="fadeOut-img" src="image.jpg" alt="ユニコーン">

CSS

.fadeOut-img {
  opacity: 0;
  animation: fadeOut 4s ease-in-out infinite;
}

@keyframes fadeOut {
  0% { 
    opacity: 1; 
  }
  100% { 
    opacity: 0;
  }
}

スライドイン（左から）

オブジェクトが左から滑り込んでくるアニメーション。

HTML

<img class="slideInL-img" src="image.jpg" alt="ユニコーン">

CSS

.slideInL-img {
  animation: slideInL 3s ease-in-out infinite;
}

@keyframes slideInL {
  from { 
    transform: translateX(0%);
    opacity: 0;
  }
  to { 
    transform: translateX(100%);
    opacity: 1; 
  }
}

スライドイン（右から）

オブジェクトが右から滑り込んでくるアニメーション。

HTML

<img class="slideInR-img" src="image.jpg" alt="ユニコーン">

CSS

.slideInR-img {
  animation: slideInR 3s ease-in-out infinite;
}

@keyframes slideInR {
  from { 
    transform: translateX(200%);
    opacity: 0;
  }
  to { 
    transform: translateX(100%);
    opacity: 1; 
  }
}

スライドイン（上から）

オブジェクトが上から滑り込んでくるアニメーション。

HTML

<img class="slideInT-img" src="image.jpg" alt="ユニコーン">

CSS

.slideInT-img {
  animation: slideInT 3s ease-in-out infinite;
}

@keyframes slideInT {
  from { 
    transform: translateY(-100%);
    opacity: 0;
  }
  to { 
    transform: translateY(0%);
    opacity: 1; 
  }
}

スライドイン（下から）

オブジェクトが下から滑り込んでくるアニメーション。

HTML

<img class="slideInB-img" src="image.jpg" alt="ユニコーン">

CSS

.slideInB-img {
  animation: slideInB 3s ease-in-out infinite;
}

@keyframes slideInB {
  from { 
    transform: translateY(100%);
    opacity: 0;
  }
  to { 
    transform: translateY(0%);
    opacity: 1; 
  }
}

ズームイン

オブジェクトが徐々に拡大されるアニメーション。

HTML

<img class="zoomIn-img" src="image.jpg" alt="ユニコーン">

CSS

.zoomIn-img {
  animation: zoomIn 2s ease-in-out infinite;
}

@keyframes zoomIn {
  from { 
    transform: scale(0.5);
    opacity: 0;
  }
  to { 
    transform: scale(1);
    opacity: 1; 
  }
}

ズームアウト

オブジェクトが徐々に縮小されるアニメーション。

HTML

<img class="zoomOut-img" src="image.jpg" alt="ユニコーン">

CSS

.zoomOut-img {
  animation: zoomOut 2s ease-in-out infinite;
}

@keyframes zoomOut {
  from { 
    transform: scale(1);
    opacity: 1;
  }
  to { 
    transform: scale(0.5);
    opacity: 0; 
  }
}

ふわふわ

オブジェクトがふわふわ浮くようなアニメーション。

HTML

<img class="float-img" src="image.jpg" alt="ユニコーン">

CSS

.float-img {
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(-10%);
  }
  50% {
    transform: translateY(10%);
  }
}

ぽよん

オブジェクトがぽよんと弾むアニメーション。

HTML

<img class="poyon-img" src="image.jpg" alt="ユニコーン">

CSS

.poyon-img {
  animation: poyon 4s ease-in-out infinite;
}

@keyframes poyon {
  0%, 100% {
    transform: scale(1) translateY(0);
    }
  30% {
    transform: scale(1.2, 0.8) translateY(-20px);
    }
  50% {
    transform: scale(0.8, 1.2) translateY(0);
    }
  70% {
    transform: scale(1.1, 0.9) translateY(-10px);
    }
  90% {
    transform: scale(0.9, 1.1) translateY(0);
    }
}

バウンド

オブジェクトが跳ねるようなアニメーション。

HTML

<img class="bounce-img" src="image.jpg" alt="ユニコーン">

CSS

.bounce-img {
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { 
    transform: translateY(0);
  }
  40% { 
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

回転

オブジェクトが回転するアニメーション。

HTML

<img class="rotate-img" src="image.jpg" alt="ユニコーン">

CSS

.rotate-img {
  animation: rotate 2s ease-in-out infinite;
}

@keyframes rotate {
  from { 
    transform: rotate(0deg);
  }
  to { 
    transform: rotate(360deg);
  }
}

反転

オブジェクトが反転するアニメーション。

HTML

<img class="flip-img" src="image.jpg" alt="ユニコーン">

CSS

.flip-img {
  animation: flip 2s ease-in-out infinite;
}

@keyframes flip {
  from { 
    transform: rotateY(0);
  }
  to { 
    transform: rotateY(360deg);
  }
}

揺れ

オブジェクトが前後に揺れるアニメーション。

HTML

<img class="shake-img" src="image.jpg" alt="ユニコーン">

CSS

.shake-img {
  animation: shake 6s ease-in-out infinite;
}

@keyframes shake {
  0%, 100% { 
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% { 
    transform: translateX(-20px);
  }
  20%, 40%, 60%, 80% { 
    transform: translateX(20px);
  }
}

ハートビート

心臓の鼓動のように、サイズが周期的に拡大・縮小するアニメーション。

HTML

<img class="heartbeat-img" src="image.jpg" alt="ユニコーン">

CSS

.heartbeat-img {
  animation: heartbeat 1.2s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% { 
    transform: scale(1);
  }
  50% { 
    transform: scale(1.2);
  }
}

点滅

オブジェクトが光り輝くようなアニメーション。

HTML

<img class="blink-img" src="image.jpg" alt="星">

CSS

.blink-img {
  animation: blink 3s ease-in-out infinite;
}

@keyframes blink {
  0%,100% { 
    opacity: 1;
  }
  50% { 
    opacity: 0.2;
  }
}

スイング

オブジェクトがゆらゆら揺れるアニメーション。

HTML

<img class="swing-img" src="image.jpg" alt="ユニコーン">

CSS

.swing-img {
  animation: swing 3s ease-in-out infinite;
}

@keyframes swing {
  20% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

ラバーバンド

オブジェクトがゴムのように伸び縮みするアニメーション。

HTML

<img class="rubberBand-img" src="image.jpg" alt="ユニコーン">

CSS

.rubberBand-img {
  animation: rubberBand 3s ease-in-out infinite;
}

@keyframes rubberBand {
  0%, 100% {
    transform: scaleX(1);
  }
  30% {
    transform: scaleX(1.25);
  }
  40% {
    transform: scaleX(0.75);
  }
  50% {
    transform: scaleX(1.15);
  }
  65% {
    transform: scaleX(0.95);
  }
  75% {
    transform: scaleX(1.05);
  }
}

歪み

オブジェクトが歪むアニメーション。

HTML

<img class="skew-img" src="image.jpg" alt="ユニコーン">

CSS

.skew-img {
  animation: skew 3s ease-in-out infinite;
}

@keyframes skew {
  0%, 100% {
    transform: skew(0deg, 0deg);
  }
  50% {
    transform: skew(10deg, 10deg);
  }
}

輝き

オブジェクトが輝いてみえるアニメーション。

HTML

<div class="shine-wrap">
  <img class="shine-img" src="image.jpg" alt="ユニコーン">
</div>

CSS

.shine-wrap{
  position: relative;
}

.shine-wrap::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 0;
  display: inline-block;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: shine 3s ease-in-out infinite;
}

@keyframes shine {
  0% {
    transform: scale(0) rotate(45deg); opacity: 0;
  }
  85% {
    transform: scale(0) rotate(45deg); opacity: 0.5;
  }
  86% {
    transform: scale(4) rotate(45deg); opacity: 1;
  }
  100% {
    transform: scale(30) rotate(45deg); opacity: 0;
  }
}

ロールイン（左から）

オブジェクトが回転しながら左から滑り込んでくるアニメーション。

HTML

<img class="rollInL-img" src="image.jpg" alt="ユニコーン">

CSS

.rollInL-img {
  animation: rollInL 3s ease-in-out infinite;
}

@keyframes rollInL {
  0% {
    opacity: 0;
    transform: rotate3d(0, 0, 1, -120deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(100%, 0, 0);
  }
}

ロールイン（右から）

オブジェクトが回転しながら右から滑り込んでくるアニメーション。

HTML

<img class="rollInR-img" src="image.jpg" alt="ユニコーン">

CSS

.rollInR-img {
  animation: rollInR 3s ease-in-out infinite;
}

@keyframes rollInR {
  0% {
    opacity: 0;
    transform: translate3d(200%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(100%, 0, 0);
  }
}