CSSによる無限ループアニメーションの実装方法

2025/06/262025/06/27

背景のオブジェクトを回し続けたい、ローディング状態を示し続けたいなど、繰り返し動く要素を作りたいときに無限ループアニメーションは役立ちます。

CSSのアニメーションとinfinite指定で簡単に実現できます。

HTML


<div class="rotate-icon">🔄</div>

基本CSS


.rotate-icon {
  display: inline-block;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.rotate-icon {

display: inline-block;

animation: rotate 2s linear infinite;

}

@keyframes rotate {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

応用：左右に揺れる演出に変更

シンプルな回転だけでなく、振動やスイング効果にも応用可能です。


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

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