Cómo usar transiciones en CSS3
Todo el mundo ama el movimiento. Adición de la cuarta dimensión (tiempo) de un diseño del sitio es la principal forma de diseño basado en pantallas se destaca de diseño de impresión. Las transiciones CSS son un método sencillo para las propiedades de un elemento que le permite enriquecer ciertos eventos en el diseño de su web, sin necesidad de Flash o animación JavaScript.
El W3C describe muy bien las transiciones en su página web como «transiciones CSS permite que los cambios de propiedad en los valores de estilo CSS que se produzca 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 y de infundir diseños con sutileza y emoción que no es posible con un cambio rápido.
Compatibilidad con navegadores
Todos los navegadores modernos (sí, incluso IE!) Ahora soportan las transiciones CSS. Sin embargo, lo más importante, si las transiciones no son compatibles con el navegador utilizado, la transición se ignora y los cambios de propiedad se puede aplicar inmediatamente. Esta degradación elegante es una piedra angular de las mejores prácticas.
Con el fin de ampliar la gama de soporte de los navegadores que podemos utilizar prefijos de proveedores, esto se extiende la característica de 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 prefijo de proveedor es el siguiente:
[code lang=»css»]
div {
-o-transition: all 1s ease;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
[/code]
La propiedad no se añade como prefijo en la parte inferior para asegurar que la implementación final triunfará sobre todas los demás, ya que la propiedad se mueve de borrador al estatus de 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 «todos» para aplicar a todas las propiedades;
- transition-duration: la duración de la transición;
- transition-timing-function: la disminución que debe aplicarse, esto crea el movimiento más natural
- transtion-delay: especifica un retraso del inicio de la transición.
Además, también puede usarse la propiedad rápida (como en el ejemplo anterior) donde los parámetros se especifican como propiedad, la duración, la función de sincronización, delay.
Las propiedades que pueden hacer la transición
Sólo se pueden aplicar las propiedades de transicion que pueden traducirse en un valor matemático. Así, por ejemplo, usted puede pasar font-size, pero no se puede pasar font-face.
La lista completa de las propiedades que actualmente se pueden aplicar 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 se unen al estado normal del elemento. Por lo tanto, sólo una vez es declarada por varios estados como: focus, :active y pseudo classes. Usando el siguiente código podemos crear un menú básico y un párrafo de texto. Es un estilo para que los elementos del menú cambien su color y el color de fondo cuando pase el puntero sobre ellos y para que los cambios Link Inline subrayen su color de blanco a verde cuando se pase sobre el:
[code lang=»html»]
<!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>
<ul class=’nav’>
<li><a href=’#’>Business</a></li>
<li><a href=’#’>Code</a></li>
<li><a href=’#’>Design</a></li>
<li><a href=’#’>Inspiration</a></li>
<li><a href=’#’>Miscellaneous</a></li>
<li><a href=’#’>Mobile</a></li>
<li><a href=’#’>News</a></li>
<li><a href=’#’>Resources</a></li>
<li><a href=’#’>Usability</a></li>
</ul>
<p>Integer posuere erat a ante <a href=’#’>inline link</a> venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
</body>
</html>
[/code]
Queremos interpolar esas propiedades, para que funcionen sin problemas. Queremos interpolar tanto el color y el color de fondo de los elementos de navegación, pero para el texto en línea, solo lo queremos entre el subrayado. Esto lo hacemos añadiendo lo siguiente a nuestra definición de estilo:
[code lang=»css»]
/*
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;
}
[/code]