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

Posted 2023-04-13

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

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

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

参考技术A

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

具体操作如下：

参考技术B 主要需要使用 -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 属性。
动画实际上就是过渡的扩展。 要创建动画，您可以使用关键帧。
您可以将关键帧看作是某个项目在整个动画持续时间内某个特定时刻的状态。

本回答被提问者和网友采纳 参考技术C 主要需要使用 -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;

参考技术D 加入infinite关键字，就可以让动画无限次播放。

动画设计属性

在样式里的div需要先写动画名如aa，animation：aa 10s(动画时长），infinite（无限循环）

1、@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
2、使用animation进行动画捆绑。两个值：动画名称、时长
3、我们一般情况下使用0%~100%来规定动画发生的时机。或者使用关键词from...to...，效果等同于0%~100%。
4、加上一个infinite值就可以无限执行了
5、ease——默认开始慢慢加速，结束时慢慢减速。
     linear——默认始终使用相同速度运行。
     alternate——交替执行（也可以成为正反执行）