Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

Fundamentos de CSS: Transiciones CSS3

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called CSS3 Mastery.
Quick Tip: Detect CSS3 Support in Browsers with JavaScript
Quick Tip: Ever Thought About Using @Font-face for Icons?

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

A medida que CSS3 se desenveulve alrededor de la web, está trayendo algunas nuevas técnicas de presentación interesantes junto con él. Hoy, revisaremos los conceptos básicos del uso de transiciones y animaciones CSS3 para añadir una capa adicional de pulimento.

Este tutorial incluye un presentción en video disponible para miembros Tuts+ Premium.

Paso 1 - Transiciones de Enlace

Para empezar, vamos a trabajar con algunas técnicas básicas - en primer lugar un simple cambio de color de texto cuando un usuario pasa el ratón sobre un elemento especificado.

Aquí, cambiamos el color del texto a rojo al pasar el ratón. Ahora, con un poco de CSS3, podemos crear un aspecto mucho más suave desvaneciendo gradualmente el color.

Hemos añadido la propiedad css -webkit-transition. Nótese que el prefijo -webkit especifica que esto sólo funcionará en los motores de Webkit o en Safari y Chrome. Por suerte, otros navegadores modernos también tienen sus propias implementaciones. Una declaración completa cubriendo todos los navegadores podría verse similar a la siguiente:

Por favor tenga en cuenta que para este tutorial, nos enfocaremos exclusivamente en la implementación de webkit. Después de la declaración de la propiedad, tenemos los valores "color 1s ease-in". Esta es la declaración abreviada, los tres valores representan:

  1. la propiedad que será transicionada
  2. la duración de la transición
  3. el tipo de transición

En este caso, la transición se realiza utilizando ease-in, lo que iniciará la transición lentamente y acelerará mientras termina la transición.


Paso 2 - Transiciones de Fondo

Otro uso básico de cambiar estados es cambiar el fondo de un cuadro de entrada al enfocarlo.

Esta vez, ponemos la declaración de transición en el estado de foco, de modo que no agregamos clases innecesarias adicionales al CSS. Aplicamos la transición una vez que el cuadro de ingreso de datos adquiere el foco.


Paso 3 - Transicionando Múltiples Propiedades

Las transiciones CSS son en realidad relativamente sencillas de agregar a la funcionalidad al pasar el ratón existente, y darle a su sitio que el brillo extra con los navegadores que soportan CSS3.

Para llevar las cosas un paso más allá, también podemos realizar la transición de varias propiedades CSS utilizando las versiones largas de la transición CSS3.

Esta vez, el color del fondo y del texto cambian al pasar el ratón, por lo que podemos apuntar ambas de estas propiedades con nuestra transición. Simplemente dividimos la transición: primero tenemos -webkit-transition-property y separamos los diferentes valores con una coma. De esta forma apuntamos a  las propiedades de color y fondo, respectivamente.

Luego establecemos la duración de la transición utilizando:

Éstos se referencian en el mismo orden que la primera declaración, sin embargo, ambos valores se han establecido a 1s.

Por último, establecemos la función de temporización y configuramos dos valores diferentes: el primero, lineal, se relaciona con nuestra primera variable declarada - color y el segundo se refiere al fondo variable.

Listo, hemos establecido el color a un cambio lineal durante un segundo, y el fondo se desvanecerá en el mismo período de tiempo.


Video Explicativo Completo

 

Paso 4 - Juntando las Piezas

Las transiciones CSS3 empiezan a llegar cuando se combinan con otras propiedades CSS nuevas.

Usted puede revisar ejemplos de uso de elementos superpuestos y transiciones en For a Beautiful Web de Andy Clarke.

Vamos a crear un ejemplo simple de animar un letrero que salta.


Primero creamos el cuadro delimitador para el letrero, y le damos un contexto relativo de posicionamiento para asegurar que podemos colocar artículos absolutamente dentro de él.

Ahora posicionamos la caja en la página y ponemos las piezas de nuestro letrero dentro de ella.

A continuación, el poste se posiciona con un z-index de dos, para colocarlo por encima del letrero.

Ahora, agregamos el letrero, situado debajo del poste, y lo rotamos con la propiedad transform de CSS3.

El letrero se gira usando -webkit-transform: rotate (86deg) y se coloca debajo del poste. Para asegurar que el letrero rota alrededor del punto correcto, debemos cambiar el origen de la transformación a la esquina superior izquierda: 0, 0.


Establecemos la transición para cambiar la propiedad           -webkit-transform por un lapso de 0,5s con un perfil de desvanecimiento de adentro-hacia-afuera, y al pasar el ratón giramos el letrero de nuevo a su orientación original.

Hacemos esto en el contenedor #signpost:hover en vez de pasar el ratón sobre #sign en sí.


Paso 5 - Presentado las Animaciones


Ahora podemos unir todo esto, usando animaciones de webkit, que nos dan el poder de llevar a cabo cosas como la rotación continua.

Comenzamos creando dos imágenes circulares y las posicionamos dentro de un div contenedor - como lo hicimos con el letrero arriba.

Ahora tenemos que definir las animaciones; vamos a girar los círculos en direcciones opuestas, de tal manera que tenemos que configurar dos animaciones.

A las animaciones se les da un nombre para referencia, en este caso "spin" y "spinrev". Luego les asignamos un valor desde y hasta, así rotamos la imagen de 0 a 360 grados usando la transformación webkit, y a -360 grados para el inverso.

Ahora le asignamos a esta animación los estados de hover.  Tenga en cuenta que, si se los hubiésemos asignado al estado normal, la animación se ejecutaría inmediatamente al gargarse la página.

Referenciamos el nombre de la animación que creamos anteriormente (-webkit-animation-name: spin;). Luego declaramos el número de veces que queremos que se ejecute la animación (-webkit-animation-iteration-count: infinite;). En este caso, infinito las mantendrá girando y girando hasta que se pase el ratón por encima de el div #circles.

Luego establecemos la función de temporización (-webkit-animation-timing-function: linear;) y finalmente establecemos una duración para cada iteración - en este caso, será de diez segundos (-webkit-animation-duration: 10s ;) y cinco para una vuelta completa.


Paso 6 - Graciosa Degradación con Modenizr

Una vez que tengamos todo funcionando, deberíamos considerar a nuestros usuarios que están navegando sin navegadores web compatibles con CSS3. Esto se logra fácilmente utilizando una biblioteca de JavaScript como Modernizr, que agrega clases al elemento HTML relacionadolas con las capacidades del navegador.

Utilizando el ejemplo de la publicación en el letrero anterior, los navegadores que no soportan transformaciones CSS no colocarán correctamente el letrero debajo de la publicación correctamente; así que podemos apuntar a estos navegadores y ocultar simplemente el letrero hasta que se le pase por encima el ratón.

Es tan simple como vincular el script de Modernizr, encontrar el nombre de clase apropiado y luego crear una declaración CSS independiente para esa instancia.


Conclusión

Eso es todo por ahora. ¡Espero que lo haya disfrutado!  ¡Déjeme saber si usted tiene cualquier pregunta/comentario en la parte de abajo!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.