Controle de temporização e direção
No controle de temporização e direção das animações CSS, determinamos a velocidade e orientação do movimento.
Utilizando propriedades como animation-duration
para definir a duração da animação e animation-timing-function
para especificar a aceleração ou desaceleração, garantimos um controle preciso.
As palavras-chave como ease
, linear
e ease-in-out
influenciam a curva de tempo, proporcionando efeitos distintos.
Para direcionar a animação, a propriedade animation-direction
é essencial. Ao usar valores como normal
, reverse
, ou alternate
, podemos controlar a ordem e o sentido da animação.
Por exemplo, para fazer uma caixa se mover da esquerda para a direita indefinidamente, podemos empregar o seguinte código:
@keyframes moveRight { from { transform: translateX(0); } to { transform: translateX(100px); } } .element { animation: moveRight 2s linear infinite; }
Neste exemplo, a animação “moveRight” desloca a caixa horizontalmente de 0 a 100 pixels ao longo de 2 segundos, utilizando uma transição linear de forma infinita.
Isso demonstra o controle simples e eficaz que o CSS oferece para ajustar a temporização e direção das animações, permitindo experiências visuais mais cativantes.