En las animaciones CSS, la propiedad animation-timing-function controla la rapidez con la que un elemento animado cambia a lo largo de la duración de la animación. Si la animación es un automóvil que se mueve del punto A al punto B en un tiempo determinado (la animation-duration su animation-duration ), la animation-timing-function la animation-timing-function dice cómo el automóvil acelera y desacelera en el transcurso del viaje. Hay una serie de palabras clave predefinidas disponibles para las opciones populares. Por ejemplo, el valor predeterminado es la ease , que comienza lento, se acelera en el medio y luego se ralentiza nuevamente al final. Otras opciones incluyen la ease-out , que es rápida al principio y luego se ralentiza, la ease-in , que es lenta al principio, luego se acelera al final, o linear , que aplica una velocidad de animación constante en todo momento.

Para los elementos con el ID de ball1 y ball2 , añadir una animation-timing-function propiedad para cada uno, y establecer #ball1 a linear , y #ball2 a ease-out . Observe la diferencia entre cómo se mueven los elementos durante la animación pero terminan juntos, ya que comparten la misma animation-duration de animation-duration de 2 segundos.

```yml tests: - text: El valor de la propiedad de animation-timing-function para el elemento con el id ball1 debe ser lineal. testString: 'assert($("#ball1").css("animation-timing-function") == "linear", "The value of the animation-timing-function property for the element with the id ball1 should be linear.");' - text: El valor de la propiedad de animation-timing-function para el elemento con el id ball2 debe ser fácil de eliminar. testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the animation-timing-function property for the element with the id ball2 should be ease-out.");' ```