css3循环动画在第一次执行的时候可以设置多少秒之后开始执行，但到了下一次开始执行的间隔时间怎么设置？ 30

<!DOCTYPEhtml><htmllang="en"><head><metahttp-equiv="Content-Type"content="text/html;c... <!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">

.f2{
width:250px;
height:250px;
border:2px solid #0649be;
background:#fff;
opacity:0;
animation:f2 3s linear 3s infinite alternate;
-webkit-animation:f2 3s linear 3s infinite alternate ;
}
@keyframes f2
{
0% {opacity:0;}
25% {opacity:25%;}
50% {opacity:50%;}
75% {opacity:75%;}
100% {opacity:1;}
}

@-webkit-keyframes f2
{
0% {opacity:0;}
25% {opacity:25%;}
50% {opacity:50%;}
75% {opacity:75%;}
100% {opacity:1;}
}
</style>
<body>
<div class="f2"></div>
</body>
</html> 展开

 我来答

7个回答

#热议# 为什么有人显老，有人显年轻？

link专注休闲娱乐

高能答主

2021-10-22 · 关注影视娱乐，关心休闲娱乐

link专注休闲娱乐

采纳数：169 获赞数：61098

向TA提问私信TA

关注

展开全部

把总动画设为4秒，然后前75%也就是3秒都没变化（0-75%），之后的25%也就是1秒做动画就可以了，具体的democan参见demo。

循环动画由几幅画面构成，要根据动作的循环规律确定。但是，只有三张以上的画面才能产生循环变化效果，两幅画面只能起到晃动的效果。

在循环动画中有一种特殊情况，就是反向循环。比如鞠躬的过程，可以只制作弯腰动作的画面，因为用相反的循序播放这些画面就是抬起的动作。掌握循环动画制作方法，可以减轻工作量，大大提高工作效率。因此在动画制作中，要养成使用循环动画的习惯。

物体的变化，可以分解为连续重复而有规律的变化。因此在动画制作中，可以尽制作几幅画面，然后像走马灯一样重复循环使用，长时间播放，这就是循环动画。

动画中的常用方法：

动画中常用的虚线运动、下雨、下雪、水流、火焰、烟、气流、风、电流、声波、人行走、动物奔跑，鸟飞翔，轮子的转动，机械运动以及有规律的曲线运动、圆周运动等等，都可以采用循环动画。

但事情总是一分为二的，循环动画的不足之处就是动作比较死板，缺少变化。为此，长时间的循环动画，应该进一步采用多套循环动画的方式进行处理。

已赞过 已踩过<

评论收起

百度网友9e614bb
推荐于2018-03-24 · TA获得超过151个赞

知道答主

回答量：6

采纳率：0%

帮助的人：1.5万

我也去答题访问个人页

关注

展开全部

你是要延迟三秒执行动画，然后用六秒（因为alternate）执行完动画，从淡入到淡出，然后在延迟三秒执行动画吗？

那你可以用这样的思路，keyframes那里的动画，你可以将其整个的执行时间设成久点，将其消失的时间和动画也算进去，我做出了两种，alternate和both。

alternate：

.f2的样式修改成

animation:f2 4.5s linear 1.5s infinite alternate;
-webkit-animation:f2 4.5s linear 1.5s infinite alternate;

动画修改成

@keyframes f2
{
0% {opacity:0;}
20% {opacity:0;}
40% {opacity:0.25;}
60% {opacity:0.5;}
80% {opacity:0.75;}
100% {opacity:1;}
}
@-webkit-keyframes f2
{
0% {opacity:0;}
20% {opacity:0;}
40% {opacity:0.25;}
60% {opacity:0.5;}
80% {opacity:0.75;}
100% {opacity:1;}
}

both:

animation:f2 9s linear 0s infinite both;
-webkit-animation:f2 9s linear 0s infinite both ;

@keyframes f2
{
0% {opacity:0;}
16.7%{opacity: 0;}
33.3% {opacity:0;}
50% {opacity:0.5;}
66.7% {opacity:1;}
83.3% {opacity:0.5;}
100% {opacity:0;}
}
@-webkit-keyframes f2
{
0% {opacity:0;}
16.7%{opacity: 0;}
33.3% {opacity:0;}
50% {opacity:0.5;}
66.7% {opacity:1;}
83.3% {opacity:0.5;}
100% {opacity:0;}
}

你看下这两种效果符不符合你的要求

本回答被网友采纳

已赞过 已踩过<

评论收起

不羁的_VIP_
推荐于2018-01-25 · TA获得超过174个赞

知道小有建树答主

回答量：294

采纳率：31%

帮助的人：53.2万

我也去答题访问个人页

关注

展开全部

.item{  webkit-animation: revolving 4s 0s infinite;  animation: revolving 4s 0s infinite;}
@-webkit-keyframes revolving{
  0,75%{    -webkit-transform: perspective(700px) rotateX(90deg);  }
  87.5%{    -webkit-transform: perspective(700px) rotateX(0deg);  }
  100%{    -webkit-transform: perspective(700px) rotateX(-90deg);  }}

把总动画设为4秒，然后前75%也就是3秒都没变化（0-75%），之后的25%也就是1秒做动画就可以了

本回答被网友采纳

已赞过 已踩过<

评论收起

小宛手绘
2017-08-07 · TA获得超过192个赞

知道小有建树答主

回答量：239

采纳率：60%

帮助的人：99.4万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>demo of starof</title>
<style>
a {
display: inline-block;
background-color: #cc2222;
text-decoration: none;
color: #fff;
font-size: 14px;
padding: 10px 12px;
width: 100px;
position: relative;
}

.ico {
position: absolute;
width: 14px;
height: 16px;
background: url(images/ico.png) no-repeat center;
background-size: 100%;
position: absolute;
top: 4px;
right: 27px;
}
/*动画*/
.ico{
-webkit-animation: Tada 3s both infinite;
-moz-animation: Tada 3s both infinite;
-ms-animation: Tada 3s both infinite;
animation: Tada 3s both infinite;
}
@-webkit-keyframes Tada {
0% {
-webkit-transform: scale(1);
transform: scale(1)
}

70%,73% {
-webkit-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
}

77%,83%,90%,97% {
-webkit-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
}

80%,87%,93% {
-webkit-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
}

100% {
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
}
}

@-moz-keyframes Tada {
0% {
-moz-transform: scale(1);
transform: scale(1)
}

70%,73% {
-moz-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
}

77%,83%,90%,97% {
-moz-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
}

80%,87%,93%{
-moz-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
}

100% {
-moz-transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
}
}

@-ms-keyframes Tada {
0% {
-ms-transform: scale(1);
transform: scale(1)
}

70%,73% {
-ms-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
}

77%,83%,90%,97% {
-ms-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
}

80%,87%,93% {
-ms-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
}

100% {
-ms-transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
}
}

@keyframes Tada {
0% {
transform: scale(1);
transform: scale(1)
}

70%,73%{
transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
}

77%,83%,90%,97% {
transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
}

80%,87%,93%{
transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
}

100% {
transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
}
}

</style>
</head>

<body>
<nav>
<a href="javascript:;" class="box">
一元夺宝
<div class="ico"></div>
</a>
</nav>
</body>

</html>

已赞过 已踩过<

评论收起

百度网友79114b6
2018-01-24 · 超过10用户采纳过TA的回答

知道答主

回答量：19

采纳率：66%

帮助的人：7.3万

我也去答题访问个人页

关注

展开全部

css只能设置第一次停顿可以通过js重复移除添加css动画类名使浏览器重绘达到多次循环多次停顿

已赞过 已踩过<

评论收起

更多回答（5）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

css3循环动画在第一次执行的时候可以设置多少秒之后开始执行，但到了下一次开始执行的间隔时间怎么设置？ 30

其他类似问题

为你推荐：