Las transiciones representan la animación de un atributo CSS de unos valores iniciales hasta otros finales, sin el uso de flash o javasript. Las transiciones se ejecutan al llamar un evento. Por ejemplo, al pasar con el ratón por encima del objeto. Recalcar que se activa al pasar con el ratón por encima. Esto significa que desde un dispositivo táctil no podremos ponerlo en práctica. Aunque podríamos utilizar sufijos como :active o :focus para verlo en un dispositivi táctil (móvil o tablet).
Cómo funciona
La transición hace un movimiento fluido entre el primer estado del objeto y el estado final. Veamos la sintaxis de la transición:
Lo más importante será el primer atributo. El que definirá qué propiedad animaremos. La duración, serán los segundos que dure la transición. La función será la aceleración del movimiento, que lo detallaré al final del artículo. Y el retraso es el tiempo que tarda entre que activamos la animación y esta empieza, también en segundos.
Veamos un ejemplo de transición:
background-color: #caebb7;
border:2px solid #5b973b;
transition: background-color 2s ease;
}
.color:hover {
background-color: #ebb7b7;
}
Quedaría así:
Al pasar con el ratón por encima, podemos ver cómo se anima el color de fondo del objeto.
Veamos más ejemplos:
- A
- B
- C
- D
- E
- F
- A: El mismo ejemplo que en el caso anterior, con el color de fondo.
- B: Cambia su estilo de borde, tamaño y color.
- C: Se anima el ancho de la figura.
- D: En este caso, cambiamos la altura.
- E: Pasamos de un rectángulo a un círculo, cambiando el radio del borde.
- F: Aplicando una transformación, en este caso de rotación.
El código de estos ejemplos sería el siguiente:
.color {
background-color: #caebb7;
border:2px solid #5b973b;
transition: background-color 2s ease;
}
.color:hover {
background-color: #ebb7b7;
}
/* EJEMPLO B */
.borde {
background-color: #ebb7b7;
border:2px solid #d84e4e;
transition: border 2s ease;
}
.borde:hover {
border: 4px dotted #333;
}
/* EJEMPLO C */
.ancho {
background-color: #bdd6f4;
border:2px solid #4e8cd8;
transition: width 2s ease;
position: relative;
display: inline-block;
}
.ancho:hover {
width:60px;
}
/* EJEMPLO D */
.alto {
background-color: #f4e4bd;
border:2px solid #ca8f00;
transition: height 2s ease;
position: relative;
display: inline-block;
}
.alto:hover {
height:60px;
}
/* EJEMPLO E */
.radio {
background-color: #e4bdff;
border:2px solid #7700ca;
transition: border-radius 2s ease;
}
.radio:hover {
border-radius:35px;
}
/* EJEMPLO F */
.girar {
background-color: #fbffbd;
border:2px solid #b2bd00;
color:#b2bd00;
transition: transform 2s ease;
}
.girar:hover {
transform:rotate(180deg);
}
Nota: Recordad que estos efectos están muy limitados al navegador y versión que estéis usando. Por lo que os recomiendo el uso de prefijos. De esta forma:
background-color: #caebb7;
border:2px solid #5b973b;
transition: background-color 2s ease;
-o-transition: background-color 2s ease; /* Para Opera */
-ms-transition: background-color 2s ease; /* Para IE */
-moz-transition: background-color 2s ease; /* Para Firefox */
-webkit-transition: background-color 2s ease; /* Para Chrome y Safari */
}
Los prefijos solo aplicadlos a las instrucciones CSS3 que lo requieran. Yo no los he puesto todos en los ejemplos, ya que queda muy engorroso en el código, pero es imprescindible para asegurarnos de que funciona correctamente.
Un ejemplo complejo
Un gran aspecto destacado de las transiciones es que nos permiten animar más de un atributo a la vez. Para ello, solo debemos especificar «all» en vez de un solo atributo. De esta forma:
background-color: #caebb7;
border:2px solid #5b973b;
transition: all 2s ease;
}
.varios:hover {
transform:rotate(180deg);
border-radius:35px;
height:50px;
width:50px;
border: 4px dotted #333;
background-color: #ebb7b7;
}
Quedaría así:
Algunos efectos pueden quedar bien. Abusar de ellos pueden hacer que perdamos calidad en el diseño. Las transiciones mejor utilizarlas de forma sutil.
Las funciones de animación
Tenemos diferentes funciones de movimiento. Nos especifican la velocidad de la animación para hacerla más realista. La que hemos utilizado en los anteriores ejemplos era el ease. Pero tenemos estos otros:
- Linear: el movimiento siempre tiene la misma velocidad.
- Ease: empieza despacio, acelera y termina rápido.
- Ease-in: empieza despacio.
- Ease-out: termina despacio.
- Ease-in-out: empieza y termina despacio.
Podéis ver la explicación matemática, en forma de gráfica, de estas funciones en la Web de Matthew Lein.
Más información de las transiciones en la Web de W3Schools
