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

Question

[Alexander3928]

Есть 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

Comments

[Ankhena]

https://developer.mozilla.org/en-US/docs/Web/SVG/A...
https://stackoverflow.com/questions/31690880/svg-a...

[Alexander3928]

Ankhena, вроде подходит, но мне нужно чтобы элемент был, но начал анимацию через задержкой примерно через 2s. begin в таком случае не подходит

Answer 1

[ambisinister One]

Alexander3928, transition-timing-function функция расчёта времени
transition-duration продолжительность, длительность

Comments

[Alexander3928]

В svg указал. Не работает

[ambisinister One]

Alexander3928, Не любите css ?

[Alexander3928]

ambisinister One, люблю, но хочу сделать в svg

[ambisinister One]

Alexander3928, Там три аморфных элемента, синхронно анимированных.
Задержка в каком месте? Не проще просто в дивикс обернуть и анимировать, анимировать)))

[Alexander3928]

ambisinister One, Вот именно задержки там нету. А я пытаюсь найти информацию как сделать задержку перед анимацией..1 svg сразу, 2 с задержкой 1 сек. 3 svg с задержкой 2 сек. Они будут просто друг на друге находится.