Si así de fácil es hacer transiciones con CSS3 sin usar Javascript.

El paso número 1 es definir la propiedad a la que queremos añadirle el efecto.
Lo segundo es definir el tiempo para el efecto (cuanto debe tardar).

Es muy simple. Aquí un ejemplo.

Tenemos un div con la class ejemplo-div que tiene el texto MarcoGalen.com
<div class=ejemplo-div>MarcoGallen.com</div>

Agregamos algunos estilos para que el div se vea bien:

El div se ve así:

MarcoGallen.com

Ahora agregamos la transición: lo que queremos afectar y cuanto tiempo queremos que tarde. En este caso sera la escala (lo haremos mas grande). Ese tipo es una “transformación” del objeto.

Ahora tenemos que incluir algo que active la transición, en este caso sera cuando el mouse pase encima del objeto así que lo haremos sobre el “hover” del div.

Ahora cuando el mouse este sobre el div este crecerá, sin necesidad de usar Javascript y cuando el mouse salga regresara a su tamaño normal.

MarcoGallen.com

Con esta simple técnica podemos cambiar cualquier propiedad. Desde el tamaño hasta el color de fondo o el color de la letra.

Por desgracia no todos los navegadores soportan las transiciones. Los actualmente soportados son:

  • Chrome: 26+
  • IExplorer: 10+
  • Mozilla: 16+
  • Safari: 6.1+

Si te gustó este artículo y quieres recibir noticias y piezas de código que puedes usar directo en tu sitio inscríbete a nuestro boletín.




¿Conocías esta técnica? ¿Qué vas a construir con ella? Cuéntanos en los comentarios.

El cariño esta en compartir...