CSSでアイコンをふわふわさせる

公開日:2025年11月05日

その他

CSSでアイコンをふわふわさせます。

HTML

<div class="move-box">
  <div class="move-x">
    <div class="move-y">
      <img src="画像パス" alt="代替テキスト">
    </div>
  </div>
</div>

<div class="move-box">
  <div class="move-x">
    <div class="move-y">
      <img src="画像パス" alt="代替テキスト">
    </div>
  </div>
</div>

CSS

.move-box {
  /* 画面真ん中に表示 */
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -50%);
}
.move-x {
  /* 横軸アニメーション */
  animation: animate-x 8s ease-in-out infinite alternate-reverse;
}
}
.move-y {
  /* 縦軸アニメーション */
  animation: animate-y 6s ease-in-out infinite alternate-reverse;
}
@keyframes animate-x {
  0% {
    transform: translateX(-20%);
  }
  100% {
    transform: translateX(20%);
  }
}
@keyframes animate-y {
  0% {
    transform: translateY(-20%);
  }
  100% {
    transform: translateY(20%);
  }
}

.move-box {
  /* 画面真ん中に表示 */
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -50%);
}
.move-x {
  /* 横軸アニメーション */
  animation: animate-x 8s ease-in-out infinite alternate-reverse;
}
}
.move-y {
  /* 縦軸アニメーション */
  animation: animate-y 6s ease-in-out infinite alternate-reverse;
}
@keyframes animate-x {
  0% {
    transform: translateX(-20%);
  }
  100% {
    transform: translateX(20%);
  }
}
@keyframes animate-y {
  0% {
    transform: translateY(-20%);
  }
  100% {
    transform: translateY(20%);
  }
}