Search code examples
htmlcsssvgsvg-filterssvg-animate

is there any way to give multiple value in duration svg animation tag?


i am trying to perform some animation operation on svg but i am not able to get the outcome i want is there any way to add morethen one value on

<animate attributeType="CSS" attributeName="visibility" from="hidden"  to="hidden" values="hidden;visible;hidden" dur="2s" repeatCount="indefinite"/>

i am giving multiple values in values="..." but is there any possible way to do same with dur i want every values in diffrent time span can anyone guide me in right direction?


Solution

  • use values and keyTimes.

    e.g.

    <animate attributeType="CSS" attributeName="visibility" values="hidden;visible;hidden" keyTimes="0;0.4;0.6" dur="2s" repeatCount="indefinite"/>