Diferença entre suavização e atenuação das transições CSS3

Qual é a diferença entre CSS3 transições ease-in, ease-outetc.?

As transições e animações do CSS3 suportam atenuação, formalmente chamada de "função de tempo". Os mais comuns são ease-in, ease-out, ease-in-out, ease, e linear, ou você pode especificar seu próprio usando cubic-bezier().

• ease-in começará a animação lentamente e terminará em velocidade total.
• ease-out iniciará a animação em velocidade total e terminará lentamente.
• ease-in-out começará lentamente, será mais rápido no meio da animação e terminará lentamente.
• easeé semelhante ease-in-out, exceto que começa um pouco mais rápido do que termina.
• linear não usa atenuação.
• Finalmente, aqui está uma ótima descrição da cubic-beziersintaxe, mas geralmente não é necessária, a menos que você queira alguns efeitos muito precisos.

Basicamente, atenuar é reduzir a velocidade até uma parada, atenuar é acelerar lentamente e linear é não fazer nada. Você pode encontrar recursos mais detalhados na documentação para timing-functionno MDN .

E se você quiser os efeitos precisos acima mencionados, o incrível Lea Verou's cubic-bezier.com está lá para você! Também é útil para comparar as diferentes funções de tempo graficamente.

Outra, a steps()função de tempo , age como linear, mas executa apenas um número finito de etapas entre o início e o fim da transição. steps()foi mais útil para mim em animações CSS3, ao invés de transições; um bom exemplo é carregar indicadores com pontos. Tradicionalmente, usa-se uma série de imagens estáticas (digamos, oito pontos, dois mudando de cor em cada quadro) para produzir a ilusão de movimento. Com uma steps(8)animação e uma rotatetransformação, você está usando o movimento para produzir a ilusão de quadros separados! Que divertido.