初心者向け！CSSアニメーションで回転するボックスを作ろう

こんにちは！今回は、CSSを使ってシンプルなアニメーションを作成する方法を紹介します。具体的には、回転するボックスを作ってみましょう。コードの各部分をわかりやすく解説していきますので、初心者の方でも安心して進められます！

See the Pen Rotating_Animation by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

HTMLファイルを作成
CSSファイルを作成
おまけ
1. 画像にする場合
まとめ
1. 参考

HTMLファイルを作成

まずはHTMLファイルを作成します。このファイルには、ボックスを回転させるための基本的な要素を含めます。

<div class="container">
   <div class="rotating-box"></div>
</div>

「<div class=”container”> 」はボックスを中央に配置するためのコンテナです。
「<div class=”rotating-box”>」は回転するボックスの要素です。

CSSファイルを作成

次に、CSSファイルを作成します。ここでは、ボックスのスタイルとアニメーションを定義します。以下のコードをコピーして、styles.cssという名前で保存しましょう。

.rotating-box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    margin: 50px auto;
    animation: rotate 2s linear infinite;
}

「width」と「height」でボックスのサイズを指定しています。
「background-color」でボックスの背景色を指定しています。
「margin」でボックスの外側の余白を指定しています。
「animation」で回転アニメーションを設定しています。

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

「from」と「to」でアニメーションの開始と終了の状態を設定しています。
「transform: rotate(0deg)」から「transform: rotate(360deg)」に変化することで、ボックスが回転します。

/* コンテンツを中央に */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

「display: flex」でフレックスボックスを使って要素を配置しています。
「justify-content: center」で横方向の中央揃えをしています。
「align-items: center」で縦方向の中央揃えをしています。
「height: 100vh」でコンテナの高さを画面の高さと同じにしています。

おまけ

See the Pen Rotating_Animation_ Star by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

ちなみにスタイルシートを変えて星にすることも可能です。
この場合はCSSの「.rotating-box」の「clip-path」で星になるように設定しています。

.rotating-box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    margin: 50px auto;
    animation: rotate 2s linear infinite;

    /* clip-pathを使用して星にしてます */
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

画像にする場合

画像をくるくる回したい場合は大きく2つあります。
1つはHTMLの「<div class=”rotating-box”><img src=”hogehoge.jpg” alt=”hogehoge”></div>」とするパターンとCSSの「.rotating-box」に「background-image: url(‘hogehoge.jpg’);」といった様に設置する方法です。

この場合どちらも、「.rotating-box」を画像に合わせて修正する必要がありますのでご注意ください。