Entendendo a Sintaxe de Keyframes de Animação CSS3
Nesta etapa, você aprenderá a sintaxe fundamental dos keyframes de animação CSS3, que são os blocos de construção para criar animações web dinâmicas. As animações CSS permitem transformar suavemente elementos de um estilo para outro sem usar JavaScript.
Vamos começar entendendo a sintaxe básica dos keyframes CSS. Abra o WebIDE e crie um novo arquivo chamado styles.css no diretório ~/project.
As animações de keyframe CSS são definidas usando a regra @keyframes, que especifica o comportamento da animação em diferentes estágios da sequência de animação. Aqui está um exemplo simples para demonstrar a sintaxe:
@keyframes moveRight {
/* Estado inicial (0% ou "from") */
from {
transform: translateX(0);
}
/* Estado final (100% ou "to") */
to {
transform: translateX(300px);
}
}
Neste exemplo, moveRight é o nome da animação, e define como um elemento se moverá de sua posição original para 300 pixels para a direita.
Você também pode usar keyframes baseados em porcentagem para animações mais complexas:
@keyframes colorChange {
0% {
background-color: red;
}
50% {
background-color: green;
}
100% {
background-color: blue;
}
}
Esta animação demonstra como você pode especificar múltiplos estágios de uma animação usando valores de porcentagem, permitindo efeitos mais intrincados e dinâmicos.
Pontos-chave para lembrar sobre a sintaxe de keyframe:
- Use
@keyframes seguido por um nome de animação único
- Defina estados usando
from/to ou valores de porcentagem
- Especifique as propriedades CSS a serem animadas em cada estágio
Exemplo de saída de uma animação simples:
[Um elemento div movendo-se suavemente da esquerda para a direita]
[Um elemento div mudando de cor de vermelho para verde para azul]
