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

发布网友发布时间：2022-04-23 09:48

我来回答

共8个回答

热心网友时间：2022-04-06 11:53

一、实现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-ration

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

4、animation-timing-function

规定动画的速度曲线。

5、animation-delay

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

6、animation-iteration-count

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

7、animation-direction

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

热心网友时间：2022-04-06 13:11

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

具体操作如下：

热心网友时间：2022-04-06 14:45

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

}

热心网友时间：2022-04-06 16:37

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

热心网友时间：2022-04-06 18:45

css3动画之无限循环进度条无限循环进度条代码示例<!DOCTYPE html><html lang=... functi... 博文来自: 比音的博客在animation出来之前,动画效果需要通过js实现,但是

热心网友时间：2022-04-06 21:09

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

热心网友时间：2022-04-06 23:51

css3 实现动画效果，使他无限循环动下去的编程如下：

解析：
keyframes：定义一个名为spin的关键帧动画。
from：指定动画的起始状态
to：指定动画的结束状态。
linear：动画匀速运动
infinite：表示动画无限循环

如果想让动画执行2次：

如果想让两次动画之间有延迟（比如一次动画结束，停留2秒再次执行动画，并且执行2次）：

还可以反向旋转（alternate表示偶数次数反向播放动画，如下代码是顺时针旋转一次后，再逆时针旋转一次）:

热心网友时间：2022-04-07 02:49

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片循环旋转</title>
<style>
*{margin: 0; padding: 0;}
.ta_c{text-align: center;
margin-top: 100px;}
@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.Rotation{
-webkit-transform: rotate(360deg);
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}
.img{border-radius: 20px; border: solid 1px #EF3F52; }
</style>
</head>
<body>
<div class="ta_c">
<img class="Rotation img" src="img/ddd.png" width="40" height="40"/>
</div>
</body>
</html>