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

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

 我来答

8个回答

#热议# 海关有哪些禁运商品？查到后怎么办？

匿名用户
2019-12-23

展开全部

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

已赞过 已踩过<

评论收起

浑楣桖q1
2018-05-30 · TA获得超过2.8万个赞

知道小有建树答主

回答量：97

采纳率：48%

帮助的人：4万

我也去答题访问个人页

关注

展开全部

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

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

如果想让动画执行2次：

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

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

已赞过 已踩过<

评论收起

使劲刨根
2018-02-13

知道答主

回答量：57

采纳率：0%

帮助的人：3.7万

我也去答题访问个人页

关注

展开全部

<!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>