css3中关键帧动画入门——简单动画（1）

关键帧动画

写法： @keyframes 名称{...}
关键帧动画就相当于是一个剧本
这里的名称是自己给的，相当于是个剧本名，后面有属性会调用到
大括号里面可以用0%{…}到100%{…}来表示，相当于分镜头，即在剧本运行到什么时候就执行{ }里面的动作

animation

animation就是调用关键帧动画的属性，即这个关键帧动画剧本谁在用，怎么用。下面我们就来看看animation的具体用法：
animation-name: 关键帧名称

animation-duration: 运动所用时间

animation-timing-function: 过渡类型，它的值有（linear：线性过渡； ease：平滑过渡； ease-in：慢-快； ease-out：快-慢； ease-in-out：慢-快-慢；特殊值：steps(n，start/end) n为将一帧到它下一帧分为n帧，start为保留下一帧的状态直到这段动画结束，end为保留当前状态直到这段动画结束。）

animation-delay: 动画延迟时间，默认是0

animation-iteration-count: 循环次数(无限循环：infinite)

animation-direction：是否为反向运动

animation-play-state：动画状态（运动：running；暂停：paused）

下面就是动画的运用的两个案例

@keyframes run{
   
            0%{
   
                background-color: aqua;
                left: 100px;
            }
            25%{
   
                background-color: blue;
                left: 200px;
            }
            50%{