Breaking

Post Top Ad

Your Ad Spot

viernes, 8 de marzo de 2019

2 pasos para animar con CSS3

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+

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas