CSS Avançado: Transformações, Transições e Animações

Transform

A propriedade transform permite modificar o espaço coordenado do modelo de formatação CSS. Usando-a, podemos rotacionar, escalar, inclinar ou traduzir um elemento.

translate(x, y): Move o elemento nos eixos X e Y.
scale(x, y): Aumenta ou diminui o tamanho do elemento.
rotate(angle): Gira o elemento no sentido horário.

Ajuste os controles para ver as transformações em tempo real:

Translate X: Translate Y: Scale: Rotate:

Transform

transform: translate(0px, 0px) scale(1) rotate(0deg);

Transition

Transições CSS permitem que você defina a transição entre dois estados de um elemento. Diferentes estados podem ser definidos usando pseudo-classes como :hover ou :active, ou dinamicamente usando JavaScript.

A sintaxe básica é: transition: property duration timing-function delay;

property: A propriedade CSS a ser animada (ou "all" para todas).
duration: Quanto tempo a transição deve levar.
timing-function: Como a transição progride ao longo do tempo (por exemplo, ease, linear, ease-in, ease-out).
delay: Um atraso antes do início da transição.

Clique no quadrado para ver a transição. Ajuste os controles para personalizar a transição:

Duração (s): Delay (s): Timing:

Transition

transition: all 0.5s ease;
.active {
    background-color: var(--secondary-color);
    transform: scale(1.2) rotate(45deg);
}

Animation (Keyframes)

Animações CSS permitem que você crie transições mais complexas e controladas entre vários estados de estilo. Elas são definidas usando @keyframes e aplicadas aos elementos usando a propriedade animation.

Propriedades de animação importantes:

animation-name: O nome da animação definida por @keyframes.
animation-duration: Quanto tempo a animação deve levar para completar um ciclo.
animation-timing-function: Como a animação progride ao longo do tempo.
animation-delay: Um atraso antes do início da animação.
animation-iteration-count: Quantas vezes a animação deve ser repetida (pode ser um número ou "infinite").
animation-direction:
- normal: do "from" para o "to"
- reverse: do "to" para o "from"
- alternate: alterna entre "from" para "to" e "to" para "from"
- alternate-reverse: começa com reverse e alterna
animation-fill-mode:
- backwards: começa no estado "from" instantaneamente
- forwards: permanece no estado "to" ao final
- both: combina backwards e forwards
- none: começa e termina na posição original do elemento

Observe a animação complexa do quadrado:

Animation

@keyframes move {
    0% { transform: translateX(0) rotate(0deg); }
    50% { transform: translateX(200px) rotate(180deg); }
    100% { transform: translateX(0) rotate(360deg); }
}
.animation-box {
    animation: move 3s ease infinite;
}

Encadeamento de Animações

Você pode aplicar múltiplas animações a um único elemento, separando-as por vírgulas. Isso permite criar efeitos complexos combinando animações simples.

No exemplo abaixo, combinamos a animação de movimento com uma animação de pulsação:

Chained

.chained-box {
    animation: 
        move 3s ease infinite, 
        pulse 1s ease-in-out infinite alternate;
}
@keyframes pulse {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}