1

我有一个包含多个 svg 文本的 svg 容器 div，以使用 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;
 }
 }
4

0 回答 0