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.