css3 实现动画效果，怎样使他无限循环动下去？

html-css012

css3 实现动画效果，怎样使他无限循环动下去？,第1张

一、实现CSS3无限循环动画代码示例。

代码如下：

CSS:

@-webkit-keyframes gogogo {

0%{

-webkit-transform: rotate(0deg)

border:5px solid red

}

50%{

-webkit-transform: rotate(180deg)

background:black

border:5px solid yellow

}

100%{

-webkit-transform: rotate(360deg)

background:white

border:5px solid red

}

}

.loading{

border:5px solid black

border-radius:40px

width: 28px

height: 188px

-webkit-animation:gogogo 2s infinite linear

margin:100px

}

扩展资料

实现动画无限循环所需要的CSS属性说明：

1、infinite

在animation后面加上infinite就可以无限循环，另外还可以做反向循环使用animation-direction

2、animation-name

规定需要绑定到选择器的 keyframe 名称。

3、animation-duration

规定完成动画所花费的时间，以秒或毫秒计。

4、animation-timing-function

规定动画的速度曲线。

5、animation-delay

规定在动画开始之前的延迟。

6、animation-iteration-count

规定动画应该播放的次数。

7、animation-direction

规定是否应该轮流反向播放动画。

主要需要使用 -webkit-animation

如：

-webkit-animation:gogogo 2s infinite linear

其中gogogo是自己定义的动画帧，2s是整个动画的秒数，infinite是永久循环 linear是线性变化 (step-end则是无线性变化，直接输出结果)

代码如下：

CSS:

@-webkit-keyframes gogogo {

0%{

-webkit-transform: rotate(0deg)

border:5px solid red

}

50%{

-webkit-transform: rotate(180deg)

background:black

border:5px solid yellow

}

100%{

-webkit-transform: rotate(360deg)

background:white

border:5px solid red

}

}

.loading{

border:5px solid black

border-radius:40px

width: 28px

height: 188px

-webkit-animation:gogogo 2s infinite linear

margin:100px

}

你是不是说的这种圆点依次出现的效果？如果是的haul，那就用动画来做就可以了。下面是源码，可以参考一下咯。另外，javascript也可以来控制依次出现。

<!DOCTYPE html>

<html>

<head>

<title>圆点依次出现</title>

<meta name="keywords" content="圆点依次出现"/>

<meta name="description" content="圆点依次出现"/>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">

<style>

*{

padding:0

margin:0

box-shadow:1px 1px gray inset,-1px -1px gray inset

}

#box{

position:relative

width:30%

height:300px

margin:0 auto

}

.dian{

position:absolute

width:20px

height:20px

border-radius:50%

top:270px

}

#dian1{

left:70%

animation:xdian1 2.5s both linear infinite

-webkit-animation:xdian1 2.5s both linear infinite/* Safari and Chrome */

}

#dian2{

left:80%

animation:xdian2 2.5s both linear infinite

-webkit-animation:xdian2 2.5s both linear infinite/* Safari and Chrome */

}

#dian3{

left:90%

animation:xdian3 2.5s both linear infinite

-webkit-animation:xdian3 2.5s both linear infinite/* Safari and Chrome */

}

@keyframes xdian1{

0%{background:gray}

33%{background:none}

68%{background:none}

100%{background:none}

}

@keyframes xdian2{

0%{background:none}

33%{background:gray}

68%{background:none}

100%{background:none}

}

@keyframes xdian3{

0%{background:none}

33%{background:none}

68%{background:gray}

100%{background:none}

}

</style>

</head>

<body>

<div id="box">

<span id="dian1"></span>

<span id="dian2"></span>

<span id="dian3"></span>

</div>

</body>

</html>

这个源码可以参考一下咯，自己用的时候还可以继续修改优化。