css animation-timing-function属性怎么用


本文摘自PHP中文网,作者藏色散人,侵删。

css animation-timing-function属性是CSS的一个动画属性,用来规定动画的速度曲线,即动画的播放方式,使动画的变化更为平滑。

css animation-timing-function属性怎么用

作用:animation-timing-function 规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。

语法:

1

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 属性。

css animation-timing-function属性使用示例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

<!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>

<p><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 animation-timing-function 属性。</p>

<div></div>

</body>

</html>

效果输出:

3ee4b9b7971e1baaf46bf3315928cca.png

以上就是css animation-timing-function属性怎么用的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

html css是什么

css如何设置元素位置不变

css中有哪些属性可以继承

css怎么设置tr间距

css border-left-width属性怎么用

“margin:0 atuo;” 是什么意思?

css如何添加阴影边框(代码实例)

css怎么控制字间距

css是什么含义

css怎么设置元素透明度

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    暂无评论...