### css3动画-- animation > #### 用于设置动画属性，它是一个简写，包含6个属性。 > 1.和transition 过渡动画不一样的时，他可以设置多个节点。每个节点有不同的动画效果。 > 2.也可以页面一打开就直接执行。 > 3.和transition 类似的点，都是执行后会回到最初的位置。 > #### 语法 ~~~ /*动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向*/ animation:name duration timing-function delay iteration-count direction play-state fill-mode; /*无限循环播放*/ animation-iteration-count:infinite; /* 暂停动画*/ animation-play-state:paused; ~~~ > #### 属性 * `@keyframes:`定义动画； * `animation:`所有动画属性的简写属性，除了`animation-play-state`属性； * `animation-name:`规定`@keyframes`动画的名称； * `animation-duration:`规定完成动画所花费的时间，以秒或毫秒计。默认是0； * `animation-timing-function:`规定动画的速度曲线。默认是`ease`。 * `animation-delay:`定义动画何时开始。默认是0。 * `animation-iteration-count:`定义动画的播放次数。默认是1。 * `animation-direction:`定义是否应该轮流反向播放动画。默认是`normal`。 * `animation-play-state:`规定动画正在运行还是暂停。默认是`running`。 * `animation-fill-mode:`规定动画在播放之前或之后，其动画效果是否可见。 >#### 逐帧动画 ~~~ <div class="ani"></div> <style> .ani { width: 280px; height: 280px; background: url(...) 0 0 no-repeat; background-size: auto 100%; margin: 0 auto; animation: ani 1.2s linear infinite; animation-timing-function: steps(帧数, end); } @keyframes ani { 0% { background-position: 0 0; } 100% { background-position: -(帧数\*宽度) 0; } } </style> ~~~