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属性指定动画是否正在运行或已暂停。

阅读剩余部分

相关阅读 >>

background-origin属性怎么用

overflow-x属性怎么用

css <basic-shape>的基本形状函数有哪些?如何使用?

html5中dialog元素的详细讲解(代码示例)

谷歌浏览器不支持CSS3

CSS3如何实现图片平移

CSS3的@keyframes是什么

CSS3怎么设置圆角

CSS3新增的伪类有哪些

CSS3实现文字折纸效果的方法(代码示例)

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




打赏

取消

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

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

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

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

评论

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