CSSで回転するアニメーションを作成する方法


  1. transformプロパティを使用する方法:

    @keyframes rotate {
    0% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(360deg);
    }
    }
    .element {
    animation: rotate 2s linear infinite;
    }

    上記のコードでは、@keyframesを使用してrotateという名前のアニメーションを定義しています。0%から始まり、100%のところで要素を360度回転させるように指定しています。そして、要素にanimationプロパティを適用して、アニメーションの名前、実行時間、タイミング関数、繰り返し回数を指定しています。

  2. transformプロパティとtransitionプロパティを使用する方法:

    .element {
    transform-origin: center;
    transition: transform 2s linear;
    }
    .element:hover {
    transform: rotate(360deg);
    }

    上記のコードでは、要素にtransform-originプロパティを適用して、回転の中心を要素の中心に設定しています。また、transitionプロパティを使って、変化するプロパティとアニメーションの時間とタイミング関数を指定しています。そして、要素がホバーされたときにtransformプロパティを使用して要素を360度回転させるように指定しています。

  3. CSSアニメーションライブラリを使用する方法: CSSアニメーションライブラリを使用すると、よりシンプルに回転するアニメーションを作成できます。代表的なライブラリとしては、Animate.cssやHover.cssがあります。これらのライブラリは事前に定義されたクラスを要素に追加するだけでアニメーションを実現できます。

以上が、CSSで回転するアニメーションを作成するためのいくつかの方法です。選択した方法に応じて、適切なコードを使用して回転アニメーションを実装してください。