Css 如何设置多个关键帧，使其分别连续运行无限次_Css_Loops_Animation_Sag

Css 如何设置多个关键帧，使其分别连续运行无限次

css loops animation

Css 如何设置多个关键帧，使其分别连续运行无限次,css,loops,animation,sag,Css,Loops,Animation,Sag,我有一个svg容器div，其中包含多个svg文本，使用css关键帧将第一个文本设置为淡出，将第二个文本设置为淡出。我想知道是否有任何方法可以将整个动画设置为无限播放 <html> <div id="fading"> <svg> <text class="fadingA" x="20%" y="50%">Follow Me</text> <text class="fadingB" x="13%" y="50%">On S

我有一个svg容器div，其中包含多个svg文本，使用css关键帧将第一个文本设置为淡出，将第二个文本设置为淡出。我想知道是否有任何方法可以将整个动画设置为无限播放

<html>
<div id="fading">
<svg>
 <text class="fadingA" x="20%" y="50%">Follow Me</text> 
 <text class="fadingB" x="13%" y="50%">On Social Media</text>
 </svg>

问题解决了，谢谢。

.fadingA{
font-size: 100px; fill:#BFAE99;
stroke: #171F26; stroke-width:3px;
stroke-dasharray: 352.6px;
animation: animate1 3s ease forwards;
}
.fadingB{
 font-size: 100px; fill: transparent;
 stroke: #171F26; stroke-width:3px;
 stroke-dasharray: 457.7px;
 stroke-dashoffset: 457.7px;
 animation: animate2 3s ease forwards;
 animation-delay: 3s;
 }

 @keyframes animate1{

 to{
  stroke-dashoffset: 352.6px;
  fill: transparent;
 }
 }
 @keyframes animate2 {
 to{
 stroke-dashoffset:0px;
 fill:#BFAE99;
 }
 }