css3中animation属性animation-timing-function知识点以。。。
在animation中最重要的其实就是时间函数（animation-timing-function）这个属性，他决定了你的动画将以什么样的速度执⾏，所以最关键的属性值也就是cubic-bezier(n,n,n,n)，你平时⽤到的linear、ease、ease-out等都是基于这个属性值的，那么我们接下来就看看这个东西到底是什么含义。
这个时间函数是通过⼀个坐标反映出来的：
这个就是timing-function的⼯作图，总共有4个点来描述整个曲线的运动形状，其中P0和P3是开始和截⽌的位置，关键位置是P1和P2，那么P1的坐标(x,y)就对应了
cubic-bezier(n,n,n,n)的前两个n的值，⽽P2的坐标对应了后两个n的值，那么整个图中就有4个点了（P0、P3永远是固定的）。
接下来就是关键步骤了，将P0、P1连线、P2、P3连线，此时这两条线就是整条曲线⾸位的切线，然后发挥⾃⼰的想象⼒想⼀下，这两个切线固定，那么整条曲线基本就可以画出来了（因为你要平滑连接、不要乱拐弯），不信你可以⾃⼰确定两个点试试，永远可以画出⼀条平滑的曲线。
画完了，这就是⼀条运动曲线，那么怎么确定动画的速度呢，其实这条曲线的平陡程度就是动画快慢的反应，即越陡的部分动画反应出来就是越快，越平的部分当然动画反应的就是越慢了。
1.普通动画介绍
那么基于这两个重要的坐标，css指定了⼏条常⽤的曲线：
linearcss中的position属性
{-webkit-animation-timing-function:cubic-bezier(0,0,1,1);}
(0,0,1,1)
ease
{-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);}
(0.25,0.1,0.25,1)
ease-in
{-webkit-animation-timing-function:cubic-bezier(0.42,0,1,1);}
(0.42,0,1,1)
ease-out
{-webkit-animation-timing-function:cubic-bezier(0,0,0.58,1);}
(0,0,0.58,1)
ease-in-ou
{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);}
(0.42,0,0.58,1)
后⾯的就是他们的坐标，你可以将cubic-bezier(n,n,n,n)设置成对应值进⾏动画⽐较，是⼀样的，这是你就发现其实第⼀个linear可以换成坐标（0.5,0.5,0.5,0.5），总之很多值都可以替换。
豁然开朗了吧！？
这个懂了以后就讲正紧的animation属性吧：
属性值描述
animation-name规定需要绑定到选择器的 keyframe 名称。
animation-duration规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function规定动画的速度曲线
animation-delay规定在动画开始之前的延迟
animation-iteration-count规定动画应该播放的次数
animation-direction规定是否应该轮流反向播放动画
这是w3c官⽅给出的属性，即animation共有6个属性值，具体的请移步w3c官⽹查询具体信息。
2.steps()动画介绍
那么，规定了⾃定义的运动特效，其实有种切线是画不出来的，就是P0和P3的位置改变了，不将是起始位置了，⽽且我不仅仅位置变了，P的个数都变了，为了满⾜这个需求，并且为了满⾜逐帧动画的实现，就有了steps这个函数；
他的原理是这样的
按图理解：
animation默认以ease⽅式过渡，它会在每个关键帧之间插⼊补间动画，所以动画效果是连贯性的
除了ease，linear、cubic-bezier之类的过渡函数都会为其插⼊补间。但有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使⽤steps过渡⽅式。
steps 函数指定了⼀个阶跃函数
第⼀个参数指定了时间函数中的间隔数量（必须是正整数）
第⼆个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发⽣阶跃变化，默认为 end。
step-start等同于steps(1,start)，动画分成1步，动画执⾏时为开始左侧端点的部分为开始；
step-end等同于steps(1,end)：动画分成⼀步，动画执⾏时以结尾端点为开始，默认值为end。
看看W3C的规范 transition-timing-function
steps第⼀个参数的错误的理解：
steps(5，start)
steps() 第⼀个参数 number 为指定的间隔数，即把动画分为 n 步阶段性展⽰，估计⼤多数⼈理解就是keyframes写的变化次数
例如:
@-webkit-keyframes circle {
  0% {动画样式}
  25%{动画样式}
  50%{动画样式}
  75%{动画样式}
  100%{动画样式}
}
我之前也⼀直认为steps(5，start）中的5 就是指的keyframes中的0% 25% 50% 75% 100% 分成5个间隔等分
为什么会出现这种理解错误，我们看⼀个例⼦
keyframes的关键帧是只有2个规则的时候，假如我们有⼀张400px长度的雪碧图
@-webkit-keyframes circle {
0% {background-position-x: 0;}
100%{background-position-x: -400px;}
}
此刻设置steps(5，start）那么会发现5张图会出现帧动画的效果，因为steps中的5把 0% – 100%的规则，内部分成5个等分
实际内部会执⾏这样⼀个关键帧效果
@-webkit-keyframes circle {
0% {background-position-x: 0;}
25% {background-position-x: -100px;}
50% {background-position-x:-200px;}
75%{background-position-x: -300px;}
100%{background-position-x: -400px;}
}
将这个规则稍微修改下，加⼊⼀个50%的状态
@-webkit-keyframes circle {
0% {background-position-x: 0;}
50% {background-position-x: -200px;}
100%{background-position-x: -400px;}
}
那么同样⽤steps(5，start）效果就会乱套
此刻你会很迷惑，所以关键要理解第⼀个参数的针对点，⾸先引⼊⼀个核⼼点：
timing-function 作⽤于每两个关键帧之间，⽽不是整个动画
那么第⼀个参数很好理解了，steps的设置都是针对两个关键帧之间的，⽽⾮是整个keyframes，所以第⼀个参数对 - 次数对应了每次steps的变化
换句话说也是 0-25 之间变化5次， 25-50之间变化5次，50-75 之间变化5次，以此类推
第⼆个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发⽣阶跃变化，默认为 end
通过案例看下 step-start，step-end 的区别
@-webkit-keyframes circle {
0% {background: red}
50%{background: yellow}
100% {background: blue}
}
step-start ：黄⾊与蓝⾊相互切换
step-end ：红⾊与黄⾊相互切换
2个参数都会选择性的跳过前后部分，start跳过0%，end跳过100%
step-start在变化过程中，都是以下⼀帧的显⽰效果来填充间隔动画，所以0% 到 50% 直接就显⽰了黄⾊yellow
step-end与上⾯相反，都是以上⼀帧的显⽰效果来填充间隔动画，所以0% 到 50% 直接就显⽰了红⾊red
引⽤w3c的⼀张step的⼯作机制图
总结：
steps函数，它可以传⼊两个参数，
  第⼀个是⼀个⼤于0的整数，他是将间隔动画等分成指定数⽬的⼩间隔动画，然后根据第⼆个参数来
决定显⽰效果。
  第⼆个参数设置后其实和step-start，step-end同义，在分成的⼩间隔动画中判断显⽰效果。可以看出：steps(1, start) 等于step-start，steps(1,end)等于step-end 最核⼼的⼀点就是：timing-function 作⽤于每两个关键帧之间，⽽不是整个动画。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。