CSS3 翻滚抖文字动画实例及animation-timing-function属性

　　CSS3中制作动画有一个控制动画过渡的属性animation-timing-function，它与“transition（过渡）”中的 tanimation-timing-function 几乎完全一样，它们都有九种过渡类型供选择，并且这九种类型都是一样的，所以如果已经学习了“transition（过渡）”中的 transition-timing-function，也就掌握了 animation-timing-function。

　　animation-timing-function 的九种过渡类型分别为：linear（线性过渡），ease（平滑过渡），ease-in（由慢到快），ease-out（由快到慢），ease-in-out（由慢到快再到慢），step-start（相当于步进函数 steps(1, start)），step-end（相当于步进函数 steps(1, end),steps（步进函数），cubic-bezier（贝塞尔曲线）。为便于理解文章最后的翻滚抖文字动画实例，先看 animation-timing-function 的语法规则。

 

　　一、animation-timing-function语法规则

　　animation-timing-function：<single-animation-timing-function>[, <single-animation-timing-function> * ]

　　<single-animation-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ?]) | cubic-bezier(<number>, <number>, <number>, <number>)

 

　　二、语法说明

　　1、animation-timing-function 可以设置多个动画过度类型，默认值为ease

　　A、<single-animation-timing-function> 表示第一个动画过度类型，不能省略；

　　B、[]中的 <single-animation-timing-function> 表示第二个动画过渡类型，可以省略；

　　C、* 表示第三个、第四个、……第n个动画过度类型，可以省略；

 

　　2、<single-animation-timing-function> 取值如下：

　　ease：平滑过渡，相当于贝塞尔曲线（0.25, 0.1, 0.25, 1.0）
　　linear：线性过渡，相当于贝塞尔曲线（0.0, 0.0, 1.0, 1.0）

　　ease-in：由慢到快，相当于贝塞尔曲线（0.42, 0, 1.0, 1.0）
　　ease-out：由快到慢，相当于贝塞尔曲线（0, 0, 0.58, 1.0）
　　ease-in-out：由慢到快再到慢，相当于贝塞尔曲线（0.42, 0, 0.58, 1.0）

　　step-start：相当于 steps(1, start)
　　step-end：相当于 steps(1, end)

　　steps(<integer>[, [ start | end ] ?])：接受两个参数的步进函数。
　　<integer>必须为正整数，指定函数的步长，不能省略；
　　第二个参数：可以为 start 或 end，默认值为end，指定每一步的值发生变化的时间点，可以省略。

　　cubic-bezier(<number>, <number>, <number>, <number>)：自定义贝塞尔曲线类型，4个数值必须在[0, 1]区间内。

 

　　三、animation-timing-function 翻滚抖文字动画实例

　　以下实例仅用了一种动画过渡效果 ease-out（由快到慢），可以把它改为其它八种过渡效果中任意一种，只需把 animation 后面的 ease-out 改为需要的过渡类型即可。

　　html代码：

　　<div class="div"><h3>CSS3动画属性<br />animation-timing-function</h3></div>

　　CSS代码：

　　<style type="text/css">
　　.div{position:relative;overflow:hidden;width:160px;height:160px; border-radius:80px;border:1px solid #ab9595; background-color:#e3e2e0; text-align:center;
animation:animation1 2s ease-out infinite forwards;
}

.div h3{margin-top:50px;}

@keyframes animation1{
0%{transform:rotate(0deg); opacity:0;}
30%{transform:rotate(50deg);opacity:0.25;}
40%{transform:rotate(100deg);opacity:0.5;}
60%{transform:rotate(180deg);opacity:1;}
80%{opacity:1; color:Yellow;}
100%{opacity:1; color:Fuchsia;}
}
　　</style>

　　效果图：