@keyframes完成css的动画效果

简单介绍一下动画。就是多个过渡，够不够简单？但是语法和过渡是完全不一样的哦，这个要记住。动画是定义多个关键帧来完成的例：@keyframes zhuan{

0%{
   
}

25%{
   
}

50%{
    
}

75%{
    
}

100%{
   
}

}这里呢就定义的四个关键帧了，但是会说那个zhuan是什么？这个就要用到使用动画了animation：zhuan 5s infinite这里三句就代表了动画名字是zhuan 5秒完成该动画过程 无限循环动画过程这是一个简写，一般我们能用到的就是这三个值但是animation所拥有的值是非常多的例：animation-name: 定义好的动画名称；animation-duration: 动画所需的时长; 单位可以是s秒，也可以是ms毫秒 -- 1s = 1000ms animation-timing-function: 速度方式;animation-delay: 延迟的时间;animation-iteration-count: 播放次数(数字)或infinite(无限次);animation-direction: normal/alternate; normal表示正向播放，alternate表示第一次正向播放，第二次就是反向播放，第三次又是正向播放 animation-fill-mode: forwards/none; 动画停在最后一帧或开始位置 animation-play-state: paused/running; 规定动画正在运行或暂停，默认为running 我一般使用简写，也就是上面写到的，一般取三个值就够了，别的看项目需求，值得注意一点，这个简写代表的值不是固定的，你取什么值就会执行什么值。