Em animações CSS, a propriedade animation-timing-function controla a rapidez com que um elemento animado é modificado ao longo da duração da animação. Se a animação for um carro passando do ponto A para o ponto B em um determinado momento (sua animation-duration ), a animation-timing-function diz como o carro acelera e desacelera ao longo do percurso da unidade. Há várias palavras-chave predefinidas disponíveis para opções populares. Por exemplo, o valor padrão é a ease , que começa devagar, acelera no meio e, em seguida, desacelera no final. Outras opções incluem a ease-out , que é rápida no começo, depois desacelera, ease-in , que é lenta no começo, depois acelera no final, ou linear , o que aplica uma velocidade de animação constante.

Para os elementos com id de ball1 e ball2 , adicione uma propriedade de animation-timing-function a cada um e defina #ball1 como linear e #ball2 para ease-out . Observe a diferença entre como os elementos se movem durante a animação, mas terminam juntos, pois eles compartilham a mesma animation-duration de animation-duration de 2 segundos.

```yml tests: - text: O valor da propriedade animation-timing-function para o elemento com o id ball1 deve ser linear. 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: O valor da propriedade animation-timing-function para o elemento com o id ball2 deve ser facilitado. 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.");' ```