Vamos considerar todas as formas possíveis de trabalhar com o tempo da animação.

Propriedade animation-duration

animation-duration define o tempo necessário para que uma animação complete um ciclo (mudança do estado inicial para o final), medido em segundos (s) ou milissegundos (ms).

animation-duration: 3s | 3000ms

Execute o exemplo a seguir e passe o mouse sobre a caixa:

Propriedade animation-timing-function

animation-timing-function determina como a animação progride ao longo do tempo, controlando a aceleração e desaceleração da animação. A propriedade animation-timing-function pode receber os mesmos valores da propriedade transition-timing-function. Diversas funções de temporização predefinidas estão disponíveis, como linear, ease e ease-in-out, ou é possível definir uma curva de Bézier personalizada utilizando a função cubic-bezier().

animation-timing-function: time_function

Aplique diferentes time_functions às caixas no exemplo:

Propriedade animation-delay

animation-delay define o tempo que deve decorrer antes do início da animação. Pode ser especificado em segundos (s) ou milissegundos (ms).

animation-delay: 0.1s | 100ms

Aplicação de diferentes atrasos às caixas no exemplo: