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

ボタンを改善したり、ページの読み込み中に時間をつぶしたり、ランディングページに少しフレアを追加したりする場合でも、アニメーションは効率的に読者の注意を引き付け、Web サイトで読者を楽しませます。

Web ページにアニメーションビジュアルを追加するにはさまざまな方法がありますが、最も簡単な方法の 1つは、CSS アニメーションを使用することです。これには、HTML と CSS の知識が少し以上必要です。

仕事で CSS アニメーションを使用したい場合は、ジャンプする前に成功した CSS アニメーションの例をいくつか見ておくとよいでしょう。この追加の調査は、プロジェクトのアイデアを得て、この重要な機能で何ができるかを示すのに役立ちます。

CSS アニメーションを作成するには、次の 3つが必要です。

• アニメーション化する HTML 要素。
• アニメーションをこの要素に接続する CSS ルール。
• 一連のキーフレームは、アニメーションの最初と最後のスタイルを指定します。

速度や遅延などの宣言を使用して、アニメーションをさらに調整できます。それでは、CSS での回転アニメーションの例をいくつか見てみましょう。

CSS アニメーションを使用して画像を連続的に回転させる

この例では、回転させたい要素に CSS コマンドを追加します。2s を調整して、アニメーションで回転時間を遅くしたり速くしたり、360 度回転したりできます。

例：

<img src="/img/DelftStack/logo.png" class="image_rotate" width="200" height="200" />

.image_rotate {
    animation: rotation 2s infinite linear;
}

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

出力：画像は完全に 360 度回転します。

次の例では、画像といくつかのプロパティを含む HTML マークアップが必要になります。ご覧のとおり、画像要素には、回転、線形、無限の 3つのクラスがあります。

各クラスには、CSS での宣言ブロックが必要です。アニメーションでは、360 度に回転し、2s を変更して回転の長さを遅くしたり速くしたりします。

<img src="/img/DelftStack/logo.png" class="rotate linear infinite" width="200" height="200" />

.rotate {
    animation: rotation 4s;
}
.linear {
    animation-timing-function: linear;
}
.infinite {
    animation-iteration-count: infinite;
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

出力：画像は完全に 360 度回転します。