css3动画如何停止


本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。

在css中,可以使用animation-play-state属性控制动画的暂停,语法“animation-play-state:paused”;该属性在不同浏览器的兼容性不同,需加上对应前缀(如“-ms-”,“ -webkit-”等)。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。

CSS3的animation直接提供一个animation-play-state的样式来控制动画的暂停处理。增加一个控制暂停样式,写动画样式的时候特别注意下不同浏览器的兼容性,加上对应的前缀。

示例:

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

34

35

36

37

38

39

40

41

42

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>document</title>

<style>

div{

    width:100px;

    height:100px;

    background:red;

    position:relative;

    animation:mymove 5s;

    animation-play-state:paused;

    /* Safari and Chrome */

    -webkit-animation:mymove 5s;

    -webkit-animation-play-state:paused;

}

@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> animation-play-state属性不兼容 Internet Explorer 9以及更早版本的浏览器.</p>

<div></div>

</body>

</html>

animation-play-state属性指定动画是否正在运行或已暂停。

阅读剩余部分

相关阅读 >>

彻底理解css中视觉格式化模型(附示例)

CSS3 icon属性怎么用?

CSS3的@keyframes是什么

CSS3中background-orgin实现带相框照片显示效果-案例解析(代码实例 )

css如何使用计数器给元素自动编号?css计数器的使用(代码示例)

border-image-width属性怎么用

CSS3 nav-right属性怎么用?

不支持CSS3的浏览器有哪些

使用CSS3模拟打字效果(代码实例)

text-outline属性怎么用

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




打赏

取消

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

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

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

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

评论

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

    暂无评论...