El atributo keyTimes se usa para especificar una lista de números de coma flotante (valores de tiempo) entre 0 y 1 (inclusive) que se usa para controlar el ritmo de la animación. Los elementos que usan este atributo incluyen <animate>, <animateColor>, <animateMotion> y <animateTransform>.
Sintaxis:
keyTimes = [;<number>]*
Valores de atributo: el atributo keyTimes acepta los valores mencionados anteriormente y descritos a continuación.
- [;<número>]*: Es una lista de números entre 0 y 1 separados por punto y coma.
Nota: El valor predeterminado para el atributo keyTimes es ninguno .
Los siguientes ejemplos ilustran el uso del atributo keytimes .
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green; margin-left: 35px;"> GeeksforGeeks </h1> <svg viewBox="-10 80 620 120" xmlns="http://www.w3.org/2000/svg"> <polygon fill="green" points="55.724, 91.297 41.645, 91.297 36.738, 105.038 47.483, 105.038 41.622, 124.568 62.783, 98.526 51.388, 98.526" /> <animate attributeType="CSS" attributeName="visibility" values="hidden;visible;hidden" keyTimes="0; 0.75; 1" dur="1s" repeatCount="indefinite" /> </svg> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green; margin-left: 35px;"> GeeksforGeeks </h1> <svg viewBox="0 0 620 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10" fill="green"> <animate attributeName="cx" dur="2s" repeatCount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keyTimes="0 ; 0.3 ; 0.6 ; 0.80 ; 1" /> </circle> </svg> </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