CSS无限循环问题答案

【问题标题】：CSS Infinite Loop issueCSS无限循环问题
【发布时间】：2021-09-02 19:07:26
【问题描述】：

我对当前的动画很满意，但我无法让动画从头开始并无限循环。可以在这个上使用一些帮助。我也包括了 svg。我相信这个问题可能与 forwards 关键字有关，因为动画从第 1 条到第 7 条按顺序运行。再次感谢您的帮助，因为这是现在有点担心。

body {
  background: #000;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

svg g path {
  opacity: 0;
  animation: fadeIn 1s ease-in-out 300ms forwards;
}

svg g path#bar1 {
  animation-delay: 500ms;
}

svg g path#bar2 {
  animation-delay: 1s;
}

svg g path#bar3 {
  animation-delay: 2s;
}

svg g path#bar4 {
  animation-delay: 3s;
}

svg g path#bar5 {
  animation-delay: 4s;
}

svg g path#bar6 {
  animation-delay: 5s;
}

svg g path#bar7 {
  animation-delay: 6s;
}

<svg width="40pt" height="40pt" viewBox="0 0 236 202" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g>
            <g id="Group 2">
                <g id="Group 1">
                    <g id="surface1">
                        <g id="Group">
                            <path id="bar7" d="M236 32.6488L214.5 5L193 32.6488H204.579V192.693H223.897V32.6488H236Z"
                                fill="white" />
                        </g>
                        <g id="Group_2">
                            <path id="bar6" d="M172 56V192.645H193.404V56H172Z" fill="white" />
                        </g>
                        <g id="Group_3">
                            <path id="bar5" d="M139 76V192.504H159.404V76H139Z" fill="white" />
                        </g>
                        <g id="Group_4">
                            <path id="bar4" d="M106 89V192.363H126.404V89H106Z" fill="white" />
                        </g>
                        <g id="Group_5">
                            <path id="bar3" d="M75 112V191.957H96.4042V112H75Z" fill="white" />
                        </g>
                        <g id="Group_6">
                            <path id="bar2" d="M43 130V192.957H64.4042V130H43Z" fill="white" />
                        </g>
                        <path id="bar1" d="M11 149V191.957H31V149H11Z" fill="white" />
                    </g>
                </g>
            </g>
        </g>
    </svg>

【问题讨论】：

将动画iteration-count设置为infinte

标签： css animation sass css-animations

【解决方案1】：

animation-iteration-count CSS 属性设置动画序列在停止前应播放的次数。将以下内容添加到您的svg g path CSS 选择器函数animnation-iteration-count: infinite。

【讨论】：

看起来很简单，但是在添加迭代次数时，我现在正在淡入淡入地让动画脱离接收器。
应该是infinite （也在你现在多余的评论中）...什么是animnation... Splellign maters！
@EdwardWilliamSams 您可能需要调整持续时间和填充模式，以便为您的延迟找到正确的配对
如果您发布您的尝试的工作片段，我很可能会为您弄清楚。
我添加了另一个 CSS 动画来管理不透明度。 ``` 动画：fadeIn 1200ms ease-in-out 3s forwards, clear 4.5s forwards infinite``` 但快到了。 @keyframes clear { to{ opacity: 0; } }

【解决方案2】：

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

svg g rect {
  opacity: 0;

  animation: fadeIn 1s ease-in-out 300ms infinite;

  &#bar1 {
    animation-delay: 500ms;
  }
  &#bar2 {
    animation-delay: 1s;
  }
  &#bar3 {
    animation-delay: 2s;
  }
  &#bar4 {
    animation-delay: 3s;
  }
  &#bar5 {
    animation-delay: 4s;
  }
  &#bar6 {
    animation-delay: 5s;
  }
  &#bar7 {
    animation-delay: 6s;
  }
}

<svg><g>
<rect fill="#bb22930" width="100" height="100"></rect>
</g></svg>

【讨论】：

我认为这里真正的问题是 forwards 关键字允许动画从第 1 小节到第 7 小节按顺序运行。这允许动画重复但不是以正确的时间延迟顺序。
如果你把 html 和 css 放在我运行它会更好
刚刚也包含了 svg。

【解决方案3】：

看看这个

@keyframes fadeIn {
     0% {
         opacity: 0;
    }

  50%{
    opacity:1
  }
     100% {
         opacity:0;
    }
}
 body {
     background: #444;
}
 path[class^="bar"] {
     opacity: 0;
     animation: fadeIn 5s ease;
   animation-iteration-count: 10;
}

 path.bar1 {
     animation-delay: 500ms;
}
 path.bar2 {
     animation-delay: 1s;
}
 path.bar3 {
     animation-delay: 1.5s;
}
 path.bar4 {
     animation-delay: 2s;
}
 path.bar5 {
     animation-delay: 2.5s;
}
 path.bar6 {
     animation-delay: 3s;
}
 path.bar7 {
     animation-delay: 3.5s;
}

<body>
<svg width="40pt" height="40pt" viewBox="0 0 236 202" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g>
            <g id="Group 2">
                <g id="Group 1">
                    <g id="surface1">
                        <g id="Group">
                            <path class="bar7" d="M236 32.6488L214.5 5L193 32.6488H204.579V192.693H223.897V32.6488H236Z"
                                fill="white" />
                        </g>
                        <g id="Group_2">
                            <path class="bar6" d="M172 56V192.645H193.404V56H172Z" fill="white" />
                        </g>
                        <g id="Group_3">
                            <path class="bar5" d="M139 76V192.504H159.404V76H139Z" fill="white" />
                        </g>
                        <g id="Group_4">
                            <path class="bar4" d="M106 89V192.363H126.404V89H106Z" fill="white" />
                        </g>
                        <g id="Group_5">
                            <path class="bar3" d="M75 112V191.957H96.4042V112H75Z" fill="white" />
                        </g>
                        <g id="Group_6">
                            <path class="bar2" d="M43 130V192.957H64.4042V130H43Z" fill="white" />
                        </g>
                        <path class="bar1" d="M11 149V191.957H31V149H11Z" fill="white" />
                    </g>
                </g>
            </g>
        </g>
    </svg>
  </body>

【讨论】：

谢谢兄弟看起来很可靠。可能会和这个一起去。