@Alexander3928

Как задать задержку анимации svg?

Есть 3 одинаковых svg, как задать задерску перед анимацией svg?

<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="350" height="350">
          <path fill="#F9F9F9">
            <animate attributeName='d' dur='5000ms' repeatCount='indefinite' values='
                M393,341.5Q310,433,201,399Q92,365,70,234Q48,103,176,93Q304,83,390,166.5Q476,250,393,341.5Z;
                M382.5,342Q310,434,205.5,396Q101,358,98.5,248Q96,138,207.5,87.5Q319,37,387,143.5Q455,250,382.5,342Z;
                M399.5,340.5Q309,431,207.5,393Q106,355,101.5,247Q97,139,201.5,108.5Q306,78,398,164Q490,250,399.5,340.5Z;
                M383.5,362Q323,474,210.5,417Q98,360,78,235Q58,110,185.5,83Q313,56,378.5,153Q444,250,383.5,362Z;
                M393,341.5Q310,433,201,399Q92,365,70,234Q48,103,176,93Q304,83,390,166.5Q476,250,393,341.5Z;
              '>
            </animate>
          </path>
          <defs>
            <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
              <!-- <stop offset="0%" style={{stopColor: 'rgb(255, 95, 109)'}}/> -->
              <!-- <stop offset="100%" style={{stopColor: 'rgb(255, 195, 113)'}}/> -->
            </linearGradient>
          </defs>
        </svg>


https://codepen.io/Alexxxsander/pen/XWZKwoR
  • Вопрос задан
  • 67 просмотров
Пригласить эксперта
Ответы на вопрос 1
ambisinistrone
@ambisinistrone
sic transit Gloria mundi
Alexander3928, transition-timing-function функция расчёта времени
transition-duration продолжительность, длительность
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы