上一篇总结了transitions和2D变换。本文总结了动画和3D变换。有许多场景可用于动画。比如加载页面的时候，可以放一张gif，也可以自定义一个小动画来缓解用户等待的焦虑，比如下面三个小圆圈的动画。想要完成一个动画效果，首先要知道定义的语法。使用animation实现动画，@keyframes定义元素的运动规律（1）animation-name：动画的名称，即@keyframes定义的动画名称（必填）（2）animation-duration：动画的执行时间，一个动画需要多长时间完成（必填）（3）animation-timing-function：动画的速度曲线，默认ease（逐渐变慢），还有这些选项线性匀速ease-in加速ease-in-out先加速再减速ease-out减速(4)animation-delay：动画执行延迟时间，默认0s(5)animation-iteration-count：动画执行次数，默认为1、也可以选择infinite表示无限次(6)animation-direction：指定动画是否在下一个循环中反向播放。默认为normal，不反向播放。您也可以选择交替播放。比如一个盒子从左往右走，如果执行次数为1，执行完盒子后，会立马从右往左弹。如果设置了交替反向播放，盒子会按照设置的速度曲线走完动画，然后向左返回。(7)animation-fill-mode：指定动画的结束状态，默认backwards回到初始状态，也可以选择保持状态。设置forwards后，animation-direction不会生效。(8)animation-play-state：设置动画的运行状态。默认是running，也可以选择paused停止//这么多属性可以组合在一起写，不是每一个都需要写，如果使用默认项可以省略，animation-play-state没有组合写法动画：namedurationtiming-functiondelayiteration-countdirectionfill-mode用一个简单的动画来展示以上属性，同时区分ease,ease-in,ease速度曲线的区别-in-out和ease-out时间位移@keyframesmove{0%{transform:translateX(0px)}100%{transform:translateX(1000px);}}.box{margin-top:20px;宽度：100px；高度：80px；背景颜色：棕色；动画名称：移动；//动画名称animation-duration:6s;//动画执行时间animation-timing-function:ease;//动画速度曲线，分别是ease,ease-in,ease-in-out,ease-out动画-delay:1s;//动画延迟1s执行animation-fill-mode:forwards;//执行完成后保持状态}下面先演示如何使用animation-direction,animation-fill-mode,animation-play-state每个方块的animation-direction和animation-fill-mode都是默认配置.正常不倒退，倒退回到起始位置。不需要定义默认属性。第二个方框显示animation-derection：alternatereverseplayback，reverseplayback需要匹配播放次数，animation-direction，如果默认只播放一次，则不生效。第三个框表示animation-fill-mode:forwards保持动画结束后的状态。第四个框表示当鼠标经过时框停止移动animation-play-state:paused了解了动画的各种配置属性后，可以根据2D或3D的变化制作一些小动画。上面三个小圆圈的加载动画使用了动画+2D变化，通过缩放盒子的大小来达到动态的效果。实现代码如下//html代码
