时间:2021-07-01 10:21:17 帮助过:38人阅读
CSS3 animation-timing-function属性
作用:
animation-timing-function 规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。
语法:
- animation-timing-function: value;
说明:
animation-timing-function 使用名为三次贝塞尔(Cubic Bezier)函数的数学函数,来生成速度曲线。您能够在该函数中使用自己的值,也可以预定义的值:
linear:动画从头到尾的速度是相同的。
ease:默认值。动画以低速开始,然后加快,在结束前变慢。
ease-in:动画以低速开始。
ease-out:动画以低速结束。
ease-in-out:动画以低速开始和结束。
cubic-bezier(n,n,n,n):在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
注:Internet Explorer 9 以及更早的版本不支持 animation-timing-function 属性。
CSS3 animation-timing-function属性的使用示例
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- div
- {
- width:100px;
- height:100px;
- background:red;
- position:relative;
- animation:mymove 5s infinite;
- animation-timing-function:linear;
- /* Safari and Chrome */
- -webkit-animation:mymove 5s infinite;
- -webkit-animation-timing-function:linear;
- }
- @keyframes mymove
- {
- from {left:0px;}
- to {left:200px;}
- }
- @-webkit-keyframes mymove /* Safari and Chrome */
- {
- from {left:0px;}
- to {left:200px;}
- }
- </style>
- </head>
- <body>
- <div></div>
- </body>
- </html>
效果图:
以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注Gxl网相关教程栏目!!!
以上就是animation-timing-function属性有什么用的详细内容,更多请关注Gxl网其它相关文章!