コピペOK！CTAやLPのボタンに使える動くCSSアニメーション集

2025年3月7日

当サイトには広告が含まれています。

こんにちは、今回はランディングページやCTAエリアのボタンに動きをつけて、サイトにアクセントを与えるCSSアニメーションをご紹介します。コピペして簡単にお使いいただけます！
よく見かける、使いやすいアニメーションです。ボタン以外にも画像、その他要素に適用させることができますのでぜひ参考にしてみてください。

わかりやすいように角度強めにしてたりするので、数値はご自身でいい感じに調整してください。

拡大・縮小を繰り返すアニメーション

拡大・縮小するサンプル

CSS

/* アニメーションの設定: 2秒ごとに1.2倍に拡大・縮小を繰り返す */
@keyframes scaleAnimation {
    0%, 100% {
        transform: scale(1); /* 元のサイズ */
    }
    50% {
        transform: scale(1.2); /* 1.2倍に拡大 */
    }
}

/* アニメーション対象の要素 */
.animated-btn {
    animation: scaleAnimation 2s infinite ease-in-out; /* 2秒周期で繰り返し */
}

ふわふわし続けるアニメーション

ふわふわサンプル

CSS

/* アニメーションの設定：上下にふわふわと浮遊する動き */
@keyframes floatAnimation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);　/* 中間点：上10px移動 */
  }
  100% {
    transform: translateY(0);
  }
}

/* アニメーション対象の要素 */
.animated-btn {
    animation: floatAnimation 2s infinite ease-in-out; /* 2秒周期でふわふわ移動 */
}

左右にゆらゆらしているアニメーション

可愛いイラストにしてもいいと思います！

ゆらゆらサンプル

CSS

/* アニメーションの定義 */
@keyframes swayAnimation {
  0% {
    transform: rotate(0deg);
  }
  25% {
    /* 1/4のタイミングで左5度傾く */
    transform: rotate(-5deg);
  }
  50% {/
    transform: rotate(0deg);
  }
  75% {
    /* 3/4のタイミングで右5度傾く */
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* アニメーションを適用する要素 */
.animated-btn {
  animation: swayAnimation 2s infinite linear;
  /* 2秒で1サイクル、無限に繰り返す、一定速度でスムーズに動く */
}

ブルブルし続けるアニメーション

ブルブルサンプル

CSS

@keyframes shakeAnimation {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(3px);
  }
  60% {
    transform: translateX(-3px);
  }
  70% {
    transform: translateX(3px);
  }
  80% {
    transform: translateX(-3px);
  }
  100% {
    transform: translateX(0);
  }
}

.animated-btn {
  animation: shakeAnimation 1.3s ease-out infinite;
  animation-delay: 1s;　/* 1秒後にアニメーションを開始 */
}