E com o animation-duration que você define em quanto tempo a animação irá ocorrer, mas é com o animation-timing-function que você consegue dar vida e deixar mais orgânica (parecida com o mundo real) essa animação.
See the Pen animation-timing-function by André | Origamid (@origamid) on CodePen.
Essa propriedade é responsável por controlar a velocidade em que a animação irá ocorrer, no espaço de tempo definido pelo duration. Se você animar um carro acelerando, por exemplo, ele sempre irá começar devagar e aumentar a sua velocidade com o tempo.
Para influenciarmos na velocidade, a propriedade possui algumas palavras-chave já com velocidades mais comuns pré-definidas. São elas:
- ease
- ease-in
- ease-out
- ease-in-out
- linear
- step-start
- step-end
Veja o exemplo abaixo de cada uma delas funcionando:
See the Pen Animation Timing Function – Keywords by André | Origamid (@origamid) on CodePen.
- ease (começa e termina devagar, meio rápido)
- ease-in (começa devagar)
- ease-out (termina devagar)
- ease-in-out (começa e termina devagar)
- linear (mantém a mesma velocidade)
- step-start (fica na posição inicial da animação)
- step-end (fica na posição final da animação)
Porém o valor mais interessante é o cubic-bezier, com ele você consegue ter controle total sobre a curva de Bézier que é responsável por controlar a velocidade da animação.
Aqui você consegue ver mais sobre a curva e manipular os seus pontos para testar: http://cubic-bezier.com/ Esse é um projeto da Lea Verou
No primeiro exemplo dessa postagem eu usei cubic-bezier(.3,1,.3,1.3), o fato do último valor ser acima de 1 (no caso, 1.3), faz com que a animação passe um pouco do ponto final e depois retorne. Como uma bola quicando que amassa e depois retorna ao seu formato original. Isso deixa a animação mais orgânica, pois imita o mundo real.
See the Pen animation-timing-function-teste by André | Origamid (@origamid) on CodePen.
Acima temos um exemplo utilizando diferentes timing. Você pode observar que a cubic-bezier cria uma animação mais satisfatória do que as demais.
Stopwatch by Icon Fair from the Noun Project
Todas as postagens sobre animações com CSS: