@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
我一般使用简写，也就是上面写到的，一般取三个值就够了，别的看项目需求，
值得注意一点，这个简写代表的值不是固定的，你取什么值就会执行什么值。