CSS无限循环问题
Posted
技术标签:
【中文标题】CSS无限循环问题【英文标题】：CSS Infinite Loop issue 【发布时间】：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 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
【参考方案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" ></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 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>【讨论】：
谢谢兄弟看起来很可靠。可能会和这个一起去。以上是关于CSS无限循环问题的主要内容，如果未能解决你的问题，请参考以下文章