html自动循环function,CSS animation-timing-function 属性

亲自试一试 - 实例

实例 1

为了更好地理解不同的定时函数值，这里提供了设置五个不同值的五个不同的 div 元素：

/* W3C 和 Opera: */

#div1 {animation-timing-function: linear;}

#div2 {animation-timing-function: ease;}

#div3 {animation-timing-function: ease-in;}

#div4 {animation-timing-function: ease-out;}

#div5 {animation-timing-function: ease-in-out;}

/* Firefox: */

#div1 {-moz-animation-timing-function: linear;}

#div2 {-moz-animation-timing-function: ease;}

#div3 {-moz-animation-timing-function: ease-in;}

#div4 {-moz-animation-timing-function: ease-out;}

#div5 {-moz-animation-timing-function: ease-in-out;}

/* Safari 和 Chrome: */

#div1 {-webkit-animation-timing-function: linear;}

#div2 {-webkit-animation-timing-function: ease;}

#div3 {-webkit-animation-timing-function: ease-in;}

#div4 {-webkit-animation-timing-function: ease-out;}

#div5 {-webkit-animation-timing-function: ease-in-out;}

实例 2

与上例相同，但是通过 cubic-bezier 函数来定义速度曲线：

/* W3C 和 Opera: */

#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}

#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}

#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}

#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}

#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

/* Firefox: */

#div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1);}

#div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}

#div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);}

#div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);}

#div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

/* Safari 和 Chrome: */

#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,1,1);}

#div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}

#div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}

#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}

#div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}