El atributo repeatDur especifica la duración total para repetir la animación.
Los elementos que utilizan este atributo son:
- elemento <animado>
- elemento <animateColor>
- elemento <animateMotion>
- elemento <animateTransform>
- elemento <conjunto>
Sintaxis:
repeatDur = clock-value || indefinite
Valores de atributo: el atributo repeatDur acepta los valores mencionados anteriormente y descritos a continuación:
- clock-value: Indica el tiempo de duración para repetir la animación.
- indefinido: Especifica que la animación se repetirá indefinidamente.
Los siguientes ejemplos ilustran el uso del atributo repeatDur .
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <body> <div style="color: green; text-align: center;"> <h1> GeeksforGeeks </h1> <h4> It will stop after 4 sec. </h4> <svg viewBox="-360 0 820 150" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r='20' fill ="green"> <animate attributeName="cy" from="10" to="50" dur="1s" repeatDur="4s"/> </circle> </svg> </div> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <div style="color: green; text-align: center;"> <h1> GeeksforGeeks </h1> <h4> It will continue to animate </h4> <svg viewBox="-360 0 820 150" xmlns="http://www.w3.org/2000/svg"> <rect y="0" width="100" fill ="green" height="100"> <animate attributeName="y" from="0" to="40" dur="1s" repeatDur="indefinite"/> </rect> </svg> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA