Clicky

Cómo usar transiciones en CSS3

transiciones con CSS3

Las transiciones CSS nos permiten crear una sensación de movimiento

A todo el mundo le gusta el movimiento. Añadir la cuarta dimensión (tiempo) a un diseño de sitio web es la principal forma de diseño basado en pantalla que se destaca en el diseño de impresión. Las transiciones CSS son un método sencillo para animar propiedades de un elemento que permiten enriquecer ciertos eventos en el diseño de su web, sin necesidad de Flash o JavaScript.

El W3C describe muy bien las transiciones en su página web como "Las transiciones CSS permiten que los cambios de propiedad de los valores CSS se produzcan sin problemas durante un tiempo determinado". En otras palabras, las transiciones CSS nos permiten modificar una propiedad de forma incremental, creando una sensación de movimiento e impregnar a los diseños sutileza y emoción que no sería posible con un cambio rápido.

Compatibilidad con navegadores

Todos los navegadores modernos (sí, incluso IE!) admiten ahora las transiciones CSS. Sin embargo, lo más importante, si las transiciones no son compatibles con el navegador utilizado, el paso se omite y los cambios en las propiedades se aplicarán al instante. Esta elegante degradación es una piedra angular de las mejores prácticas.

Con el fin de ampliar la gama de soporte de los navegadores podemos usar prefijos de proveedores, esto extiende la función para incluir Firefox 4.15, Opera 10.5-12 y la mayoría de las versiones de Chrome y Safari. El código, incluyendo las alternativas de prefijo de proveedores se ve así:

div {
  -o-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

No se añade la propiedad como prefijo en la parte inferior de la pila para asegurarse de que la implementación de dichas mejoras prevalecerá sobre todas las demás, ya que la propiedad pasa de proyecto a estado terminado.

Parámetros de transición

Hay cuatro parámetros para transiciones CSS:

♦ transition-property: la propiedad que se va a interpolar, o la palabra clave 'all' para aplicar a todas las propiedades;
♦ transition-duration: la duración de la transición;
♦ transición-timing-función: la relajación a aplicar, esto crea movimiento más natural;
♦ transtion-delay: especifica un retraso en el inicio de la transición.

Además, también se puede utilizar la propiedad abreviada (como en el ejemplo anterior) donde los parámetros se especifican como property, duration, timing function, delay.

Propiedades que puede tener la transición

Sólo se pueden incluir propiedades de transición que se pueden traducir en un valor matemático. Así, por ejemplo, puedes usar font-size, pero no se puede usar font-face.

La lista completa de propiedades que actualmente soportan la transición es la siguiente:

background-position, border-bottom-color, border-bottom-width, border-left-color, border-left-width, border-right-color, border-right-width, border-spacing, border-top-color, border-top-width, bottom, clip, color, font-size, font-weight, height, left, letter-spacing, margin-bottom, margin-left, margin-right, margin-top, max-height, max-width, min-height, min-width, opacity, outline-color, outline-width, padding-bottom, padding-left, padding-right, padding-top, right, text-indent, text-shadow, top, vertical-align, width, word-spacing, z-index.

Utilizando transiciones

Las declaraciones de transición están unidas al estado normal del elemento. Por lo tanto, serán declaradas sólo una vez para varios estados, tales como :focus, :active y pseudo clases.

Con el siguiente código podemos crear un menú básico y un párrafo de texto. Con este estilo los elementos de menú cambian su color y el color de fondo cuando se pasa sobre ellos, y para que cambie su color de blanco a verde cuando se retira:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>CSS transition demo</title>

 <style type='text/css'>

 /*  STATIC PROPERTIES  */


 body {background:#fff; }
 ul { padding:0; margin:20px; }
 li { display:inline; padding:5px 0; }
 .nav a { padding:5px; }
 p { padding:0; margin:21px; }
 a { text-decoration:none; }


 /*  PROPERTIES TO TWEEN  */

 .nav a
 {
 color:#bee0bf;
 background:#1a9e5c;
 }

 .nav a:hover
 {
 color:#fff;
 background:#38b476;
 }

 p a
 {
 color:#3fa32d;
 border-bottom:1px solid #fff;
 }

 p a:hover
 {
 color:#bee0bf;
 border-bottom:1px solid #3fa32d;
 }
 </style>
</head>
<body>

Así es como se ve:

Queremos interpolar (tween) propiedades, para que funcionen sin problemas. Queremos interpolar tanto el color, como el color de fondo de los elementos de navegación pero, para el texto en línea, lo único que queremos interpolado es el subrayado. Esto lo hacemos añadiendo lo siguiente a nuestra definición de estilo:

/*
 
 CSS TRANSITIONS 
 */
 
 .nav a
 {
 -o-transition: all 500ms;
 -moz-transition: all 500ms;
 -webkit-transition: all 500ms;
 transition: all 500ms;
 }
 
 p a
 {
 -o-transition: border-bottom 250ms;
 -moz-transition: border-bottom 250ms;
 -webkit-transition: border-bottom 250ms;
 transition: border-bottom 250ms;
 }

Y aquí está el resultado:

 

Jesus_Caceres