El atributo repeatCount especifica el tiempo de duración de una animación. Los elementos que usan este atributo incluyen <animate>, <animateColor>, <animateMotion>, <animateTransform> y <set>
Sintaxis:
repeatCount = number || indefinite
Valores de atributo: el atributo repeatCount acepta los valores mencionados anteriormente y descritos a continuación.
- número: Indica el número de iteraciones. Los valores comienzan mayores que 0 y más allá.
- indefinido: Especifica que la animación se repetirá indefinidamente.
Ejemplo 1: Los siguientes ejemplos ilustran el uso del atributo repeatCount .
HTML
<!DOCTYPE html> <html> <body> <div style="color: green; text-align: center;"> <h1>GeeksforGeeks</h1> <h4>It will stop after 6 sec.</h4> <svg viewBox="0 0 620 150" xmlns="http://www.w3.org/2000/svg"> <rect x="260" y="0" fill="green" width="100" height="100"> <animate attributeType="XML" attributeName="y" from="0" to="50" dur="1s" repeatCount="6" /> </rect> </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="0 0 620 150" xmlns="http://www.w3.org/2000/svg"> <rect x="260" y="0" fill="green" width="100" height="100"> <animate attributeType="XML" attributeName="y" from="0" to="50" dur="1s" repeatCount="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