Cómo usar las transiciones CSS3

Todo el mundo ama el movimiento. Agregar la cuarta dimensión (tiempo) al diseño de un sitio es la principal forma en que el diseño basado en pantalla se destaca del diseño impreso. Las Transiciones CSS son un método simple para animar propiedades de un elemento que le permite enriquecer ciertos eventos en su diseño web, sin la necesidad de Flash o JavaScript.

El W3C describe acertadamente las transiciones en su sitio web ya que "CSS Transitions permite que los cambios de propiedad en los valores de CSS ocurran sin problemas durante un período de tiempo específico". En otras palabras, las transiciones CSS nos permiten modificar una propiedad de forma incremental, creando una sensación de movimiento e imbuyendo diseños con sutileza y emoción que no es posible con un cambio rápido.

Soporte del navegador

Todos los navegadores modernos (¡sí, incluso, IE!) Ahora son compatibles con las transiciones CSS. Sin embargo, y lo que es más importante, si las transiciones no son compatibles con el navegador utilizado, la transición se ignorará y los cambios de propiedad se aplicarán de manera instantánea. Esta elegante degradación es una piedra angular de las mejores prácticas.

Para ampliar el rango de compatibilidad con navegadores, podemos usar prefijos de proveedor, esto amplía 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, incluidas las alternativas de prefijo del proveedor, se ve así:

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

La propiedad no prefijada se agrega en la parte inferior de la pila para garantizar que la implementación final prevalecerá sobre todas las demás, a medida que la propiedad pasa del estado borrador al estado final.

Parámetros de transición

Hay cuatro parámetros para las transiciones de CSS:

• propiedad de transición: la propiedad que se va a titular, o la palabra clave 'todo' para aplicar a todas las propiedades;
• duración de transición: la duración de la transición;
• transition-timing-function: la facilidad de aplicación, crea un movimiento de aspecto más natural
• transtion-delay: especifica un retraso al inicio de la transición.

Además, también puede usar la propiedad de taquigrafía (como en el ejemplo anterior) donde los parámetros se especifican como propiedad, duración, función de tiempo, retraso.

Propiedades que pueden ser transicionadas

Solo puede hacer una transición de propiedades que se pueden traducir en un valor matemático. Entonces, por ejemplo, puede hacer una transición de tamaño de fuente; no puedes hacer la transición de font-face.

La lista completa de propiedades que se pueden cambiar actualmente 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- anchura, min-altura, min-width, opacidad, outline-color, outline-width, padding-bottom, padding-left, padding-right, padding-top, right, text-indent, text-shadow, top, vertical- alinear, ancho, espaciado de palabras, índice z.

Usando transiciones

Las declaraciones de transición se adjuntan al estado normal del elemento. Por lo tanto, solo se declaró una vez para varios estados, como: focus,: active y pseudo classes.

Usando el siguiente código podemos configurar un menú básico y un párrafo de texto. Está diseñado para que los elementos del menú cambien su color y color de fondo cuando se vuelque, y para que el enlace en línea cambie su color de subrayado de blanco a verde cuando se coloca sobre:

Business
  Código 
  Diseño 
  Inspiración 
  Diverso 
  Móvil 
  Noticias 
  Recursos 
  Usabilidad 
  Integer posuere erat a ante inline link   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. 

Así es como se ve:

¿Usas CSS3 Transitions? ¿Qué efectos has podido crear? Háganos saber en los comentarios.

Imagen destacada / miniatura, imagen en movimiento a través de Shutterstock.