贝塞尔曲线以及css动画

参考文档：http://www.cnblogs.com/dolphinX/p/4087817.html

CSS3的动画：http://www.w3school.com.cn/css3/css3_animation.asp

.cssstyle{
   animation: animation-name animation-duration animation-iteration-count;
   -webkit-animation: animation-name animation-duration animation-iteration-count;
}

@keyframes animation-name
{
from {top:0px;}
to {top:200px;}
}

@-moz-keyframes animation-name /* Firefox */
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes animation-name /* Safari 和 Chrome */
{
from {top:0px;}
to {top:200px;}
}

@-o-keyframes animation-name /* Opera */
{
from {top:0px;}
to {top:200px;}
}

animation: animation-name animation-duration animation-iteration-count

animation: name s infinite;

其实完整版的animation参数很多，也可以写成分别的属性

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction

今天我们就要关注一下animation-timing-function，大多数动画在时间轴上时线性变化的，jQuery动画的时候我们用的liner参数就是这意思，但CSS3提供了一些其它的变化方式由animation-timing-function属性指定

1. ease
2. linear
3. ease-in
4. ease-out
5. ease-in-out
6. step-start
7. step-end
8. steps
9. cubic-bezier

每种动画效果都可以对应一种贝塞尔曲线 cubic-bezier可以帮我直观的看一下贝塞尔曲线效果，这里不多说了

steps

我们看一下steps的效果，其实顾名思义就可以想到steps什么意思，就像俄罗斯方块的小格子往下掉也是动画，但是不是连续的，更像是逐帧的，steps就是实现这种效果的

steps的语法

steps(number_of_steps, [start|end])

• number_of_steps 动画分为多少步执行
• direction 动画显示状态，end：默认值，第一帧开始前显示，start：第一帧结束后显示

 

贝塞尔曲线：http://cubic-bezier.com/