Transiciones CSS3

Una de las novedades de CSS3 son las transiciones con las que se puede conseguir que cuando se cambie una propiedad CSS sea de la forma que sea el cambio entre un estado y otro sea gradual y no un salto brusco.

Hay 4 propiedades para modificar las transiciones y como es habitual en CCS también esta la posibilidad de ponerlas todas o las que queramos en una sola línea.

• transition-property: Sirve para indicar la propiedad en la que se quiere aplicar la transición. Ej. transition-property: width;
• transition-duration: Indica el tiempo que dura la transición (Por defecto 0s). Ej. transition-duration: 5s;
• transition-timming-function: Para indicar como varia la velocidad de la transición. Puede tomar los siguientes valores: linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(x,x,x,x) (Por defecto ease). Ej. transition-timming-function: linear;
• transition-delay: Indica el tiempo que pasa hasta que comienza la transición (Por defecto 0s). Ej. transition-delay: 2s;
• transition: Para unificar las cuatro propiedades en una sola. Ej. transition: width 5s linear 2s;

Y una vez vistas las propiedades vamos ha ver 3 ejemplos de como usar las transiciones de CSS3 para que veas lo sencillo que es el uso de la propiedad transition y el juego que puede dar.

Por ejemplo si queremos que cambie el ancho de un div cuando se pase el ratón por encima sería así de sencillo:

#div1 {
 width: 50px;
 height: 50px;
 background: orange;
 transition: width 2s;
}

#div1:hover  {
 width: 200px;
}

Hay que indicar la propiedad transition en el elemento en el que se quiere que se lleve acabo la transición y al menos indicar la propiedad en la que se hará y el tiempo que durará la transición porque su no se indica por defecto es 0 y el efecto sería el mismo que si no se usase. Cuando la propiedad indicada cambia se produce la transición, con el código del ejemplo anterior se produce la transición tanto cuando se pone el cursor encima del div (porque el ancho cambia de 50 a 200) como cuando el cursor se quita de encima del div (el ancho cambia de 200 a 50). Y si tuviésemos una función javaScript que cambiase el ancho también se hace la transición.

También se puede hacer una transición de varias propiedades separándolas con comas unas de otras como en el siguiente ejemplo en el que se modifican tanto el alto como el ancho.

#div2 {
    width: 50px;
    height: 50px;
    background: orange;
    transition: width 2s linear, height 1s ease-out 1s;
}

#div2:hover  {
    width: 200px;
    height: 200px;
}

Y con todas las propiedades que quieras…

#div3 {
    background: orange;
    color: black;
    font-size: 15px;
    height: 100px;
    overflow: hidden;
    padding-left: 10px;
    width: 100px;
    transition: background 3s, color 2s, font-size 2s, height 2s ease-in, width 2s; 
}

#div3:hover {
    color: white;
    background: rgba(0,0,0,0);
    font-size: 25px;
    height: 250px;
    width: 250px;
}