cssで回転アニメーション

・transform: rotate(1turn);というアニメーションを使うと要素が1回転する

.parent {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.anim {
    background-color: aqua;
    width: 100px;
    height: 100px;
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

import React from 'react'
import './AnimPage.css'

export const AnimPage = () => {
    return (
        <>
            <div className="parent">
                <div className="anim"></div>
            </div>
        </>
    )
}

結果