Propriedade CSS transition
Como usar a propriedade abreviada CSS transition para animar mudanças entre dois estados de um elemento. Veja funções e exemplos práticos.
A propriedade CSS transition permite animar a mudança do valor de uma propriedade ao longo do tempo, em vez de fazê-la mudar instantaneamente. Quando o valor de uma propriedade animável se altera — por exemplo porque o usuário passa o mouse sobre um elemento ou uma classe é alternada com JavaScript — transition faz o navegador interpolar suavemente do valor antigo para o novo, criando efeitos de fade, deslizamento, crescimento e mudança de cor sem nenhum loop de animação JavaScript.
transition é uma abreviação que define quatro propriedades longas de uma vez:
- transition-property — qual propriedade animar (ex.:
width,opacity,all). - transition-duration — quanto tempo a transição leva (ex.:
2s,300ms). - transition-timing-function — a curva de ritmo (ex.:
ease,linear,cubic-bezier(...)). - transition-delay — quanto tempo esperar antes de iniciar.
A propriedade transition é uma das propriedades CSS3.
Como ler a abreviação
Uma transição simples é escrita como:
transition: <property> <duration> <timing-function> <delay>;Apenas transition-property e transition-duration são necessários para obter um efeito visível; a função de temporização padrão é ease e o atraso é 0s.
/* animate width over 2 seconds, default easing, no delay */
transition: width 2s;
/* full form: animate transform over 300ms with a custom curve, after a 100ms wait */
transition: transform 300ms ease-in-out 100ms;O primeiro valor de tempo que o analisador lê é sempre a duração; o segundo é o atraso. Portanto, transition: opacity 1s 2s significa duração 1s, atraso 2s — e não o contrário.
Se você omitir a duração, o padrão será 0s, e uma transição de 0s é instantânea — o efeito simplesmente não anima. Sempre defina uma duração.
Animando várias propriedades
Para fazer a transição de mais de uma propriedade, separe cada conjunto com uma vírgula. Cada propriedade pode ter sua própria duração, função de temporização e atraso:
.box {
transition: left 1s ease-in-out,
background-color 1s ease-out 1s;
}Você também pode usar a palavra-chave all para fazer a transição de todas as propriedades animáveis que mudam, embora listar as propriedades explicitamente seja geralmente mais eficiente e previsível.
transition: all 0.3s ease;O valor none é válido e desativa as transições para as propriedades especificadas.
Acionando uma transição
Uma transição não faz nada por si só — ela só é executada quando uma propriedade animável muda entre dois estados. Os gatilhos mais comuns são:
- Pseudo-classes como :hover, :focus ou :active.
- Alternar uma classe com JavaScript (
element.classList.toggle('open')). - Mudanças de estilo inline a partir de um script (
element.style.opacity = 0).
Defina a transição no estado base (repouso) do elemento, não na regra :hover. Dessa forma, a animação é reproduzida tanto quando o estado é ativado quanto quando ele é desativado.
Prefixos de fornecedor como -webkit-, -moz- e -o- são legados e geralmente não são necessários para navegadores modernos.
| Initial Value | all 0s ease 0s |
|---|---|
| Applies to | All elements, ::before and ::after pseudo-elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | Object.style.transition = "all 3s"; |
Sintaxe
Sintaxe da Propriedade CSS transition
transition: transition-property | transition-duration | transition-timing-function | transition-delay | initial | inherit;Exemplo da propriedade transition com a pseudo-classe :active:
Exemplo da Propriedade CSS transition
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 150px;
height: 100px;
background: #8ebf42;
transition: width 2s;
}
div:active {
width: 600px;
}
</style>
</head>
<body>
<h2>Transition property example</h2>
<p>Click and hold to see the transition effect.</p>
<div></div>
</body>
</html>Exemplo da propriedade transition com a pseudo-classe :hover:
Exemplo da Propriedade CSS transition com a pseudo-classe :hover
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #fff;
color: #000;
font-size: 1em;
font-family: 'Roboto', Helvetica, sans-serif;
}
.element {
padding: 20px;
width: 50px;
height: 50px;
left: 0;
background-color: #8ebf42;
position: relative;
transition: left 1s ease-in-out, background-color 1s ease-out 1s;
}
.example:hover .element {
left: 400px;
background-color: #1c87c9;
}
.element-2 {
transition: none;
}
</style>
</head>
<body>
<h2>Transition property example</h2>
<div class="example">
<p>Hover over the container to see the transition effect.</p>
<div class="element element-1"></div>
<p>No transition:</p>
<div class="element element-2"></div>
</div>
</body>
</html>Bom saber
- Apenas propriedades animáveis fazem transição. Propriedades numéricas e de cor (
width,opacity,color,transform) animam; propriedades comodisplayoufont-familymudam instantaneamente. - Evite valores
auto. Uma transição entre um valor fixo eheight: autonão vai animar, porque o navegador não consegue calcular os tamanhos intermediários. Usemax-heightoutransform: scaleY()em vez disso. - Desempenho.
transformeopacitysão as propriedades mais baratas para animar porque não acionam layout ou pintura. Prefira-as em vez de animarleft/topouwidth/heightquando possível. - Transições vs. animações. Use
transitionpara mudanças de estado simples de A para B; recorra a animation com@keyframesquando precisar de loops, múltiplos passos ou movimento que começa por conta própria.
Valores
| Valor | Descrição |
|---|---|
| transition-property | Especifica os nomes das propriedades para a transição. |
| transition-duration | Especifica a duração da animação de transição. |
| transition-timing-function | Especifica a velocidade ao longo do tempo de um objeto sendo transicionado de um valor para outro. |
| transition-delay | Especifica a quantidade de tempo a aguardar antes que um efeito de transição seja animado. |
| initial | Faz a propriedade usar seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |