css3动画不循环怎么办

PHP中文网 JavaScript 381 0

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

css3动画不循环可以使用animation-iteration-count属性定义动画的播放次数。只需要在动画中添加“animation-iteration-count:infinite;”即可实现无限次循环。

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

animation-iteration-count 属性定义动画的播放次数。

语法

1

animation-iteration-count: n|infinite;

L}}4Q41OIKC{D_VSBJ4R9HU.png

实例

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

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove 3s;

animation-iteration-count:3;

 

/* Safari and Chrome */

-webkit-animation:mymove 3s;

-webkit-animation-iteration-count:3;

}

 

@keyframes mymove

{

from {top:0px;}

to {top:200px;}

}

 

@-webkit-keyframes mymove /* Safari and Chrome */

{

from {top:0px;}

to {top:200px;}

}

</style>

</head>

<body>

 

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

 

<div></div>

 

</body>

</html>

效果：

GIF.gif

推荐学习：css视频教程

以上就是css3动画不循环怎么办的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

CSS3中background-clip实现图片裁切3种效果（代码实例 ）

CSS3都有哪些新内容

CSS3和css的区别是什么

flex作用于box容器上的属性介绍

CSS3有那些内置函数

使用html5/CSS3五步快速制作便签贴特效代码示例分享（图文）

通过代码示例，了解CSS3+javascript按钮水波纹效果

CSS3绘制一个圆圆的loading转圈动画实例分享

CSS3 appearance属性怎么用？

resize属性怎么用

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




标签：

打赏

取消

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

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

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

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

相关推荐

评论

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

    暂无评论...