Um desafio anterior discutiu a palavra ease-out chave ease-out que descreve uma alteração de animação que acelera primeiro e depois desacelera no final da animação. À direita, a diferença entre a palavra ease-out chave ease-out (para o elemento azul) e linear palavra-chave linear (para o elemento vermelho) é demonstrada. Progressões semelhantes de animação para a palavra ease-out chave ease-out podem ser obtidas usando uma função de curva Bezier cúbica personalizada. Em geral, a alteração dos pontos de ancoragem p1 e p2 impulsiona a criação de diferentes curvas de Bezier, que controlam como a animação progride no tempo. Aqui está um exemplo de uma curva de Bezier usando valores para imitar o estilo animation-timing-function: cubic-bezier(0, 0, 0.58, 1); Lembre-se de que todas as funções de cubic-bezier começam com p0 em (0, 0) e terminam em p3 em (1, 1). Neste exemplo, a curva se move mais rapidamente através do eixo Y (começa em 0, vai para p1 y valor de 0, então vai para p2 y valor de 1) do que se move pelo eixo X (0 para iniciar, então 0 para p1 , até 0,58 para p2 ). Como resultado, a alteração no elemento animado progride mais rapidamente que o tempo da animação para esse segmento. No final da curva, a relação entre a alteração nos valores x e y se inverte - o valor y se move de 1 para 1 (sem alteração), e os valores x se deslocam de 0,58 para 1, fazendo com que a animação mude mais lentamente em comparação com a duração da animação.

Para ver o efeito dessa curva de Bézier em ação, altere a animation-timing-function de animation-timing-function do elemento com ID de red para uma função de cubic-bezier com valores de x1, y1, x2, y2 definidos como 0, 0, 0,58, 1 Isso fará com que ambos os elementos progridam através da animação da mesma forma.

```yml tests: - text: 'O valor da propriedade animation-timing-function do elemento com o id red deve ser uma função cubic-bezier com os valores x1, y1, x2, y2 definidos respectivamente para 0, 0, 0,58, 1.' testString: 'assert($("#red").css("animation-timing-function") == "cubic-bezier(0, 0, 0.58, 1)", "The value of the animation-timing-function property of the element with the id red should be a cubic-bezier function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .");' - text: O elemento com o ID red não deve mais ter a propriedade de animation-timing-function de linear. testString: 'assert($("#red").css("animation-timing-function") !== "linear", "The element with the id red should no longer have the animation-timing-function property of linear.");' - text: O valor da propriedade animation-timing-function para o elemento com o id blue não deve ser alterado. testString: 'assert($("#blue").css("animation-timing-function") == "ease-out", "The value of the animation-timing-function property for the element with the id blue should not change.");' ```