Propiedad transition
La propiedad transition es una abreviatura para
transiciones suaves, permite establecer simultáneamente
transition-duration,
transition-property,
transition-timing-function
y transition-delay.
Sintaxis
selector {
transition: valor;
}
El orden de las propiedades no importa, sin embargo
el tiempo de duración (transition-duration)
debe colocarse antes del retraso (transition-delay).
Valores
Consulte las propiedades correspondientes. Valor
por defecto: all 0s ease 0s.
El valor none cancela todas las transiciones
(ocurrirán instantáneamente).
Ejemplo
Pase el cursor del ratón sobre el bloque - durante 3 segundos
no pasará nada (hay un retraso de 3s), y luego cambiará suavemente su ancho
en 2 segundos. Si luego quita el cursor
- de nuevo durante 3 segundos no pasará
nada, y luego el ancho se reducirá suavemente
al valor original:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition: width 2s ease 3s;
width: 100px;
height: 50px;
}
#elem:hover {
width: 400px;
}
:
Véase también
-
la propiedad
animation,
con la que se puede crear una animación
