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

Posted 2023-05-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3循环动画在第一次执行的时候可以设置多少秒之后开始执行，但到了下一次开始执行的间隔时间怎么设置？相关的知识，希望对你有一定的参考价值。

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

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

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

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

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

动画中的常用方法：

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

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

参考技术A

你是要延迟三秒执行动画，然后用六秒（因为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;

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

参考技术B .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秒做动画就可以了

参考技术C <!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> 参考技术D css只能设置第一次停顿可以通过js重复移除添加css动画类名使浏览器重绘达到多次循环多次停顿

如何让css3动画永远循环

【中文标题】如何让css3动画永远循环【英文标题】：How to have css3 animation to loop forever 【发布时间】：2014-06-20 22:31:12 【问题描述】：

我想让整套动画永远播放。当最后一张照片消失时，我希望第一张照片再次出现，依此类推。我所做的（我不喜欢）将页面设置为在最后一张照片淡出时重新加载。有没有其他方法可以使用 css 来做到这一点？？？

<html>
    <head>
        <style>
.content
    height: 400px !important;
    /*margin: auto !important;*/
    overflow: hidden !important;
    width: 780px !important;


.imgholder
    height: 400px;
    margin: auto;
    width: 780px;


.photo1
    opacity: 0;
            animation: fadeinphoto 7s 1; 
       -moz-animation: fadeinphoto 7s 1; 
    -webkit-animation: fadeinphoto 7s 1; 
         -o-animation: fadeinphoto 7s 1; 
    float: left;
    position: relative;
    top: 0px;
    z-index: 1;


.photo2 
    opacity: 0;
            animation: fadeinphoto 7s 5s 1;
       -moz-animation: fadeinphoto 7s 5s 1;
    -webkit-animation: fadeinphoto 7s 5s 1;
         -o-animation: fadeinphoto 7s 5s 1;
    float: left;
    position: relative;
    top: -400px;
    z-index: 1;

.photo3 
    opacity:0;
            animation: fadeinphoto 7s 10s 1;
       -moz-animation: fadeinphoto 7s 10s 1;
    -webkit-animation: fadeinphoto 7s 10s 1;
         -o-animation: fadeinphoto 7s 10s 1;
    float: left;
    position: relative;
    top: -800px;
    z-index: 1;


.photo4 
    opacity: 0;
    animation: fadeinphoto 7s 15s 1;
    -moz-animation: fadeinphoto 7s 15s 1;
    -webkit-animation: fadeinphoto 7s 15s 1;
    -o-animation: fadeinphoto 7s 15s 1;
    float: left;
    position: relative;
    top: -1200px;
    z-index: 1;


.photo5 
    opacity: 0;
            animation: fadeinphoto 7s 20s 1;
       -moz-animation: fadeinphoto 7s 20s 1;
    -webkit-animation: fadeinphoto 7s 20s 1;
         -o-animation: fadeinphoto 7s 20s 1;
    float: left;
    position: relative;
    top: -1600px;
    z-index: 1;


/* Animation Keyframes*/
@keyframes fadeinphoto 
    0%  opacity: 0; 
    50%  opacity: 1; 
    100%  opacity: 0; 


@-moz-keyframes fadeinphoto 
    0%  opacity: 0; 
    50%  opacity: 1; 
    A100%  opacity: 0; 


@-webkit-keyframes fadeinphoto 
    0%  opacity: 0; 
    50%  opacity: 1; 
    100%  opacity: 0; 


@-o-keyframes fadeinphoto 
    0%  opacity: 0; 
    50%  opacity: 1; 
    100%  opacity: 0; 

        </style>
        <body>
            <div class="content">
                <div class="imgholder">
                    <img src="images/image1.jpg"   class="photo1"/>
                    <img src="images/image2.JPG"   class="photo2"/>
                    <img src="images/image3.JPG"   class="photo3"/>
                    <img src="images/image4.jpg"   class="photo4"/>
                    <img src="images/image5.jpg"   class="photo5"/>
                </div>
            </div>
        </body>
    </head>
</html>

【问题讨论】：

对animation-iteration-count使用infinite关键字 【参考方案1】：

添加此样式

animation-iteration-count: infinite;

【讨论】：

还可以提一下，CuRSoR 已经在简写中定义了迭代次数：animation: fadeinphoto 7s 20s 1; 最后一个数字（1）是迭代次数。只需将其更改为 infinite，或按照 Elads 答案中的建议添加完整的 CSS 规则。这将导致每个动画永远播放。我想让所有动画一个接一个地播放，然后重复。如果您注意到，第一张照片会在页面加载后立即出现，第二张会延迟 5 秒，第三张会延迟 10 秒，以此类推。如果我将 EACH one 的迭代设置为无限，则会导致照片的顺序混乱。有没有办法将所有动画“分组”在一起并将整个组的迭代设置为无限？您可以为每张照片添加静态关键帧，这样所有照片基本上都在循环一个长动画，但有效地制作动画，然后等待其他照片。【参考方案2】：

虽然 Elad 的解决方案可行，但您也可以内联：

   -moz-animation: fadeinphoto 7s 20s infinite;
-webkit-animation: fadeinphoto 7s 20s infinite;
     -o-animation: fadeinphoto 7s 20s infinite;
        animation: fadeinphoto 7s 20s infinite;

【讨论】：

【参考方案3】：

我偶然发现了同样的问题：一个页面有许多独立的动画，每个动画都有自己的参数，必须永远重复。

将this clue 与this other clue 合并我找到了一个简单的解决方案：在所有动画结束后，包装div 被恢复，强制动画重新开始。

您所要做的就是在页面的<head> 部分中添加这几行 Javascript，它们甚至不需要任何外部库，非常简单：

<script>
setInterval(function()
var container = document.getElementById('content');
var tmp = container.innerHTML;
container.innerHTML= tmp;
, 35000 // length of the whole show in milliseconds
);
</script>

顺便说一句，您代码中的结束 </head> 放错了位置：它必须在开始 <body> 之前。

【讨论】：

抱歉，我无法编辑它。您不应该在间隔后添加分号（在本例中为 35000），否则将不起作用。感谢您的贡献。不要使用这个。这可能会导致巨大的混乱。例如。您必须处理重新附加附加的事件处理程序和类似的东西。再加上 DOM 会无缘无故地适应。如果你在这个 sn-p 中有外部源，那么每次重放动画时它们实际上可能会被重新获取！而是像其他答案一样添加关键字initite。

以上是关于css3循环动画在第一次执行的时候可以设置多少秒之后开始执行，但到了下一次开始执行的间隔时间怎么设置？的主要内容，如果未能解决你的问题，请参考以下文章

CSS3 animation动画，循环间的延时执行该怎么弄

点击播放 css3 动画

如何让css3动画永远循环

CSS3 animation动画，循环间的延时执行该怎么弄

CSS3动画如何设置滑动到当屏的时候才触发动画播放

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