Para crear un efecto de transición, debe especificar dos cosas:
la propiedad CSS a la que desea agregar un efecto
la duración del efecto
Nota: Si no se especifica la parte de duración, la transición no tendrá efecto, porque el valor predeterminado
es 0.
Ejemplo
1
2
3
el código de CSS es muy sencillo:
div {
width: 25px;
height: 80px;
background: red;
transition: width 2s;
}
div:hover{
width:300px; (que será la dimensión nueva una vez el cursor está encima.)
}
También tenemos a nuestra disposición la posibilidad de usar:
transition-delay: (0.1s); que es un retardo del inicio o final de esta, indicado en segundos
transition-property: (background 'o' border-radius 'o bien' all); son las propiedades que tendrá
nuestra transición puede ser bien un cambio de color de fondo, o que los bordes sean radiales o bien aplicar
a todas las propiedades que están sufriendo el cambio