animation动画

动画可以分为两种

补间动画 – 具有连贯性的动画
逐帧动画 – 使用steps过渡方式实现跳跃

定义和用法

值	描述
animation-name	规定需要绑定到选择器的keyframe名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

animation 属性是一个简写属性，用于设置六个动画属性：

值	描述
animation-name	规定需要绑定到选择器的keyframe名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

简写语法

animation: name duration timing-function delay iteration-count direction;
默认： none 0 ease 0 1 normal

animation-timing-function

规定动画的速度曲线。
速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
速度曲线用于使变化更为平滑。

值	描述	测试
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
step-start	动画一开始就跳到 100% 直到这一帧（不是整个周期）结束 == steps(1,start)
step-end	保持 0% 的样式直到这一帧（不是整个周期）结束 == steps(1,end)

animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：

值	描述	测试
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
step-start	动画一开始就跳到 100% 直到这一帧（不是整个周期）结束 == steps(1,start)
step-end	保持 0% 的样式直到这一帧（不是整个周期）结束 == steps(1,end)

steps介绍
animation默认以ease方式过渡，会以在每个关键帧之间插入补间动画，所以动画效果是连贯性的。ease，linear等之类的过渡函数都会为其插入补间。但有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使用steps过渡方式。

steps()是一个timing function，允许我们将动画或者过渡分割成段，而不是从一种状态持续到另一种状态的过渡。这个函数有两个参数——第一个参数是一个正值，指定我们希望动画分割的段数。

steps(n,[start | end])

第二个参数定义了这个要点在我们的@keyframes中申明的动作将会发生的关键。这个值是可选的，在没有传递参数时，默认为”end”。方向为”start”表示一个左--持续函数，在动画开始时，动画的第一段将会马上完成。以左侧端点为起点，立即跳到第一个step的结尾处。它会立即跳到第一段的结束并且保持这样的状态直到第一步的持续时间结束。后面的每一帧都将按照此模式来完成动画。
方向为”end”表示一个右--持续函数。动画执行时，在每一帧里，动画保持当前状态直到这一段的持续时间完成，才会跳到下一步的起点，后面的每一帧都按照这个模式来进行，在最后一帧的起点，等到这一帧的持续时间结束，整个动画的执行也已经结束，执行动画的元素来不及跳到这一帧的终点，直接回到了整个动画起点，开始了第二次动画。每个选择本质上从一个不同的面移动这个元素并且将产生一个不同的位置在这个相同的动画里。

示例图

动态解析图

steps是设置的每一步动画的跳跃步数，而不是整个动画的跳跃步数。举个例子：

@-webkit-keyframes ani{
   0%{...}
   50%{...}
   100%{...}
}
.xxx:hover{
   -webkit-animation:ani 2s steps(10) ;
}

上面的代码指的是0% ~ 50%之间有10个跳跃，50% ~ 100%之间有10个跳跃。而不是0% ~ 100%之间有10个跳跃。

animation动画