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

Question

使用css3动画效果在页面只能动一次，怎样无限循环下去

Answer 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

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

Answer 2

鼠标悬停，图标会一直不停旋转。 
如果实现图标一直不停旋转，则需要使用animation动画。先制作动画的各个关键帧，然后在图标中运用这一动画。

具体操作如下：

本回答被网友采纳

Answer 3

主要需要使用 -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;

}追问

那css3中 过渡和动画的区别是什么呢？
过渡感觉也是动画啊

追答

过渡，可以让您将元素从一种样式或状态更改为另一种样式或状态。
对于过渡效果而言，您需要向浏览器指示开始和结束状态；
而对于动画，您需要指定在特定时间内的一系列 CSS 属性。
动画实际上就是过渡的扩展。 要创建动画，您可以使用关键帧。
您可以将关键帧看作是某个项目在整个动画持续时间内某个特定时刻的状态。

本回答被提问者和网友采纳

Answer 4

主要需要使用 -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;

}

Answer 5

加入infinite关键字，就可以让动画无限次播放。