Как настроить несколько ключевых кадров для запуска соответственно друг за другом на бесконечное время - PullRequest
Новая
       15

Как настроить несколько ключевых кадров для запуска соответственно друг за другом на бесконечное время

1 голос
/ 25 мая 2019

У меня есть контейнер svg div, содержащий несколько текстов svg для установки первого текста в fadeout и второго текста в fadein вместо него с использованием ключевых кадров 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;
 }
 }
...