深入理解css3的animatiion动画(1/3)

CSS3的Animation有八个属性

1. animation-name ：动画名
2. animation-duration：时间
3. animation-delay：延时
4. animation-iteration-count：次数
5. animation-direction：方向
6. animation-play-state：控制
7. animation-fill-mode：状态
8. animation-timing-function：关键帧变化

其中1-7大多都有介绍，但是animation-timing-function是控制时间的属性

在取值中除了常用到的 三次贝塞尔曲线 以外，还有个让人比较困惑的 steps() 函数

animation默认以ease方式过渡，它会在每个关键帧之间插入补间动画，所以动画效果是连贯性的

除了ease，linear、cubic-bezier之类的过渡函数都会为其插入补间。但有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使用steps过渡方式

animation-timing-function 规定动画的速度曲线

以上w3school网站上给的使用方法，但是漏掉一个很重要的 steps

简单的来说，我们一直使用animation基本都是实现线性渐变的动画

如

• 位置在固定的时间从起点到终点
• 尺寸在固定的时间线性变化
• 颜色的线性改变等等

看效果 线性动画

截取CSS如下

.test1 {
    width: 90px;
    height: 60px;
    -webkit-animation-name: skyset;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: infinite; /*无限循环*/
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes skyset {
    0% { background: red;}
    50%{ background: blue}
    100% {background: yellow;}
}

timing-function:linear 定义的是一个匀速变化的动画，就是在2秒内，从红色过度到蓝色到黄色，是一个很线性的颜色变化

如果要实现帧动画效果而不是线性的变化就需要引入step这个值了，换句话就是没有过渡的效果，而是一帧帧的变化

同样可以看测试 帧动画

理解steps

steps 函数指定了一个阶跃函数