La propiedad animation-timing-function en CSS se utiliza para especificar cómo la animación realiza transiciones a través de fotogramas clave. Es decir, se usa para especificar el movimiento de la animación durante las transiciones.
Sintaxis:
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end|steps(int, start | end) | cubic-bezier(n, n, n, n) | initial | inherit;
El valor de la propiedad:
- facilidad: con este valor de propiedad, la animación comienza lentamente, luego rápido y finalmente termina lentamente (esto es predeterminado).
- lineal: si se especifica este valor para la propiedad, la animación se reproduce con la misma velocidad de principio a fin.
- Facilidad de entrada: si se especifica este valor, la animación comienza con un inicio lento.
- salida gradual: si se especifica este valor para la propiedad, la animación se reproduce normalmente pero finaliza lentamente. Esto es similar a la facilidad de entrada.
- Facilidad de entrada y salida: con este valor de propiedad, la animación comienza y termina lentamente.
Ejemplo: programa HTML para ilustrar los valores de propiedad anteriores para la propiedad animation-timing-function.
html
<!DOCTYPE html> <html> <head> <title> CSS | animation-timing-function Property </title> <style> .geeks { font-size: 40px; text-align:center; font-weight:bold; color:#090; padding-bottom: 5px; font-family:Times New Roman; } .geeks1 { font-size:17px; font-weight:bold; text-align:center; font-family:Times New Roman; } h2 { width: 350px; animation-name: text; animation-duration: 4s; animation-iteration-count: infinite; background-color: rgb(255, 210, 85); } #one { animation-timing-function: ease; } #two { animation-timing-function: linear; } #three { animation-timing-function: ease-in; } #four { animation-timing-function: ease-out; } #five { animation-timing-function: ease-in-out; } @keyframes text { from { margin-left: 60%; } to { margin-left: 0%; } } </style> </head> <body> <div class = "geeks"> GeeksforGeeks </div> <div class = "geeks1"> A computer science portal for geeks </div> <!-- For this the animation-timing-function will be set to ease --> <h2 id="one"> This text is ease. </h2> <!-- For this animation-timing-function will be set to linear --> <h2 id="two"> This text is linear. </h2> <!-- For this animation-timing-function will be set to ease-in --> <h2 id="three"> This text is ease-in. </h2> <!-- For this animation-timing-function will be set to ease-out --> <h2 id="four"> This text is ease-out. </h2> <!-- For this animation-timing-function will be set to ease-in-out --> <h2 id="five"> This text is ease-in-out. </h2> </body> </html>
Navegador compatible: los navegadores compatibles con la propiedad animation-timing-function se enumeran a continuación:
- Google Chrome 43.0
- Internet Explorer 10.0
- Firefox 16.0
- Ópera 30.0
- Safari 9.0