使用CSS动画顺时针方向旋转div

Question

我是编码新手，并尝试使用 CSS 关键帧动画顺时针方向旋转带有 id 圆的 div 元素。这是我尝试过的示例，但它没有旋转

#circle{
    width:100px;
    height:100px;
    border-radius:50%;
    background-color: white;
    animation: turn 10s infinite;
}
@keyframes turn{
    0%{
        transform: rotate(90deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

谢谢。

Answer 1

尝试下面的代码

#circle{
width:100px;
height:100px;
border-radius:50%;
background-color: white;
animation: CRT 5s infinite linear;
}
@keyframes CRT { 
0% { 
    
    transform: rotate(-360deg)  
        translateX(100px) rotate(360deg); 
} 

100% { 
    transform: rotate(0deg)  
    translateX(100px) rotate(0deg);
} }

Answer 2

尝试下面的代码

#circle{
    width:100px;
    height:100px;
    border-radius:50%;
    background-color: white;
    animation: turn 10s infinite linear;
}
@keyframes turn{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}