コピペで使える！CSSだけで画像をスムーズに回転させる方法

※当サイトにはプロモーションが含まれています。

ホームページやランディングページ（LP）、セールスページ（SP）などで、画像に動きを付けることで、ユーザの目を引くことができます。

例えば、最近、目にすることがあったのが、下記のようなアニメーションです。

ギア
2025年遂に猫型ロボットが完成！

今回は、画像を回転させるアニメーションをCSSで作成してみました。

画像を回転させるCSSアニメーション

画像を回転させるCSSアニメーションのHTMLとCSSです。

HTML

<div class="nya-rotating-animation">
<img src="（画像のURL）" alt="（画像の説明）">
</div>

画像の<img>タグを、クラスnya-rotating-animationで囲みます。

CSS

.nya-rotating-animation img {
width: 70px;
max-width: 100%;
height: auto;
animation: nya-gear 3s linear infinite;
}

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

@keyframesを使用して、0degから360degへ回転させるアニメーションを定義しています。

また、クラスnya-rotating-animationのアニメーション部分では、

  • nya-gear → キーフレーム名
  • 3s → アニメーション時間
  • linear → 一定速度で回転
  • infinite → 無限ループ

となっています。

このように記述すると、下記のように画像を回転させるアニメーションを作成できます。

ギア

最後に、動作確認用として、HTMLとCSSをまとめたものも掲載しておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>回転するギアと見出し</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
}
.nya-container {
display: flex;
align-items: center;
gap: 15px;
}
.nya-rotating-animation img {
    width: 70px;
    max-width: 100%;
    height: auto;
    animation: nya-gear 3s linear infinite;
}
@keyframes nya-gear {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.headline {
font-size: 24px;
font-weight: bold;
color: #333;
background-color: #ffd700;
padding: 10px 15px;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="nya-container">
<div class="nya-rotating-animation">
<img src="gear.png" alt="ギア">
</div>
<div class="headline">2025年猫型ロボット遂に完成！</div>
</div>
</body>
</html>

上記をコピペして動作確認してみてください。