Propriedade transition
A propriedade transition é uma abreviada para
transições suaves, permitindo definir simultaneamente
transition-duration,
transition-property,
transition-timing-function
e transition-delay.
Sintaxe
seletor {
transition: valor;
}
A ordem das propriedades não importa, no entanto
o tempo de duração (transition-duration)
deve vir antes do atraso (transition-delay).
Valores
Consulte as propriedades correspondentes. Valor
padrão: all 0s ease 0s.
O valor none cancela todas as transições
(elas ocorrerão instantaneamente).
Exemplo
Passe o mouse sobre o bloco - 3 segundos
nada acontecerá (há um atraso de 3s), e então
ele mudará suavemente sua largura em 2
segundos. Se então você remover o mouse -
novamente 3 segundos nada acontecerá,
e então a largura diminuirá suavemente para
o valor original:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition: width 2s ease 3s;
width: 100px;
height: 50px;
}
#elem:hover {
width: 400px;
}
:
Veja também
-
a propriedade
animation,
com a qual você pode criar uma animação
