css旋转，给你简单而又有深度的解析animation: name duration timing-function d

有一次在我对css旋转特别好奇的时候，在许多软件上都没找到一个认真讲解的，现在我来给大家简单解析下

代码讲解

//rotate（自己随便定义）
@keyframes rotate{
    0%{
        transform: rotate(0)
    }
    100%{
        transform: rotate(360deg)
    }

}

如果只是旋转，一般只用0%和100%,这俩个就够了

animation: name duration timing-function delay iteration-count direction fill-mode;
/** 
name 是动画名称(名称必须得和前面自己定义的一样)
duration 动画持续时间
timing-function 动画速度
delay 动画延迟
iteration-count 动画播放次数
direction 动画是否反向播放
fill-mode 动画播放前后是否可见

**/

// 常见的值
animation: rotate 3s linear 1s infinite alternate forwards;
//linear 匀速  infinite 无限次数播放  alternate 是反向播放  forwards 动画结束保留在最后一帧

以上是对css旋转简单的概括，如还有什么疑问可私信