Latido (hover + animations 01)

Ponto rosa

Un punto? No, un círculo representando un punto.

Un punto rojo latiendo suave.

Pun-pun…
Pun-pun…
Pun-pun…

¿Y si lo acariciamos ligeramente con el cursor?

Hasta no hace mucho, para hacer algo así, usábamos JavaScript. Pero ahora, gracias a las animaciones CSS3, podemos ahorrarnos este lenguaje y utilizar sólo HTML y CSS1.

Las animaciones CSS tienen tres ventajas principales sobre las técnicas tradicionales de animación basada en scripts:

  1. Es muy fácil crear animaciones sencillas, […]
  2. La animación se muestra correctamente, incluso en equipos poco potentes. […]
  3. Al ser el navegador quien controle la secuencia de la animación, permitimos que optimice el rendimiento y eficiencia de la misma, […]

Making-of

Para construir nuestro latido utilizamos una div2

<div class="latir"></div>

centrada horizontal y verticalmente con respecto al elemento que la contiene (puede ser el body, un article, otra div, etc.),

.latir {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

a la que primero le damos forma de punto rojo

.latir {
	position: absolute;
	top: 50%;
	left: 50%;
    	transform: translate(-50%,-50%);

	/* estilo del punto rojo */
	width: 40px;
	height: 40px;
	border-radius: 50%; /* convierte la div cuadrada de 40x40px en un círculo */
	background-color: #ff006c;
	cursor: pointer; /* forzamos la aparición del cursor al hacer hover en la div  */
}

y después le aplicamos dos animaciones CSS3:

  1. Una para el latido suave, el estado inicial
  2. Otra para el latido fuerte, cuando hacemos hover

Latido suave (estado inicial)

Para crear una animación CSS3, primero añadimos a nuestra clase (o selector) una secuencia de animación CSS, a través de la propriedad animation.

.latir {
	position: absolute;
	top: 50%;
	left: 50%;
    	transform: translate(-50%,-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #ff006c;
	cursor: pointer;

	/* Secuencia de animación */
	animation: 2.5s infinite latidico; /* duración | veces que se reproduce | nombre */
}

En este caso estamos indicando que la animación dura 2.5s, que se reproduce infinitas veces (loop) y que se llama “latidico”.

Depuéss, para configur la apariencia de la animación, utilizamos un keyframes3 (de nombre “latidico”).

@keyframes latidico {
	0% {
	        transform: translate(-50%,-50%) scale(1);
	}
	94% {
		background-color: #ff006c;
	        transform: translate(-50%,-50%) scale(1);
	}
	98% {
		background-color: #ff0000;
	        transform: translate(-50%,-50%) scale(1.35); /* Alem do scale mantemos o translate, para o ponto continuar centrado ao variar de tamanho */
	}
	100% {
		background-color: #ff006c;
	        transform: translate(-50%,-50%) scale(1);
	}
}

Con él, el punto mantiene su tamaño y color de fondo entre el inicio da animación (0%) y el 94% de los 2.5s que ella dura. Después, entre el 94% y el 98% varía de color y aumenta su tamaño. Y entre el 98% e el final (100%), vuelve a su tamaño y color original.

Como este ciclo se repite en loop: aumentar-disminuir, aumentar-disminuir, aumentar-disminuir… conseguimos el pulso de nuestro latido.

Latido fuerte (hover)

Para el latido fuerte, lo primero es variar el tamanho4 del punto rojo al hacer hover con el cursor

.latir:hover {
	width: 102px;
	height: 102px;
}

y también cambiar de animación con una nueva secuencia de animación CSS, esta vez de nombre “latido”.

.latir:hover {
	width: 102px;
	height: 102px;

	/* nueva secuencia de animación  */
	animation: 0.6s linear infinite latido; /* duración | veces que se reproduce | nombre */
}

Después sólo nos falta configurar la apariencia de la nueva animación con otro keyframes (“latido”).

@keyframes latido {
	0% {
	        transform: translate(-50%,-50%) scale(1);
	}
	20% {
		background-color: #ff0000;
	        transform: translate(-50%,-50%) scale(1.5);
	}
	40% {
		background-color: #ff006c;
	        transform: translate(-50%,-50%) scale(1);
	}
}

et voilà, latido completo 🙂

Ejemplo en directo

Podéis ver/editar un ejemplo en directo aquí ( Codepen).

1 Atención a la hora de utilizar las animaciones en sites de producción. Esta tecnología es aun experimental y puede no ser compatible con algunos navegadores.
2 Nosotras utilizamos una simple div, pero también valdría un enlace (a), o un botón (buttom).
3 @keyframes, animation y transform pueden necesitar prefijos en los navegadores más viejos. En el ejemplo en directo (Codepen) ya van con ellos. Para saber que Vendor Prefix usar con las nuevas propiedades de CSS3, recomendamos Pleeease. Es muy útil!
4 Para suavizar la variación de tamaño al hacer/deshacer hover, sólo tenemos que añadir una transition en nuestro class (.latir)

Licencia: Dominio Público

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *