动画分两步完成：定义动画和使用动画。1.关键帧定义动画/*widen是动画的名称，你可以根据需要命名*/@keyframeswiden{0%{width:100px;}100%{宽度：200px；}}0%是动画开始，100%是动画结束。这样的规则是一个动画序列。我们可以使用多个百分比来指定何时发生变化，比如25%、50%等，或者使用关键字from和to，相当于0%和100%。通过在@keyframes中指定一个CSS样式，可以创建一个从当前样式逐渐变化到新样式的动画效果。2.元素使用动画div{width:100px;高度：100px；/*动画名称：加宽（必填）*/动画名称：加宽；/*完成一个动画周期所需的时间（必填）*/animation-duration:5s;/*动画的速度曲线，默认为ease*/animation-timing-function:ease;/*动画开始时，默认为0*/animation-delay:2s;/*动画播放的次数，默认1次，infinite就是无限循环*/animation-iteration-count:infinite;/*动画是否在下一个循环中反向播放，默认为normal，alternate为反向播放*/animation-direction:alternate;/*动画播放是Run还是pause，默认是running，pause是pause*/animation-play-state:running;/*动画结束后，保持当前状态（向前）或回到初始状态（向后）*/animation-fill-mode:forwards;上面的动画属性可以简写为：animation:widen5sease2sinfinitealternateforwards;缩写属性不包括animation-play-state，动画暂停通常与鼠标经过等事件结合使用。3.动画曲线动画曲线与过渡中的运动曲线一致：linear（匀速）、ease（逐渐减速）、ease-in（加速）、ease-out（减速）、ease-in-out（加速）先减速再减速）。除了这些之外，动画曲线中还有一个自定义曲线steps，它指定了时间函数中的间隔数（即完成动画的步数）。@keyframes移动{0%{左：0px；}100%{左：200px；}}div{位置：绝对；宽度：100px；高度：100px；anmition：向前移动4ssteps(5)；}上例中，div框从左到右移动200px，用时4秒，步数为5，则每一步时间为4/5=0.8s，即每0.8s移动40px，且5s仅移动200px。如果我们想给一个元素添加多个动画，可以用逗号分隔。动画：加宽5seasealternateforwards，向前移动4ssteps(5)；
