En diciembre del año pasado aprendí esta técnica viendo el blog de Lea Verou en un contenido titulado “CSS Animations with only one keyframe“, la cual he usado para animar iconos realizados con tipografía(si te interesa esta técnica te recomiendo ver estas iconografias en fuentes), pero no me había dado tiempo de compartirla, y creo que la fecha se presta para esto, sin mas dejo el ejemplo:

Ver ejemplo funcionando

¿Como funciona? Breve explicación

Tratare de explicar el funcionamiento de esta animación aunque en trucos-CSS lo explican a mejor detalle. Lo primero que se hace es definir una animación la cual tiene la siguiente estructura CSS:

@keyframes latidos {
    from { transform: none; }
    50% { transform: scale(1.4); }
    to { transform: none; }
}

Aquí estamos definiendo una animación la cual tiene el nombre de latidos, esta la vamos a instanciar(fijar) en algún elemento de nuestro código CSS, como se muestra a continuación:

.corazon {
	display: inline-block;
	font-size: 150px;
	text-shadow: 0 0 10px #222,1px 1px  0 #450505;
	color: red;
	animation: latidos .5s infinite;
	transform-origin: center;
}

Con esto estamos indicando que la animación(latidos) definida previamente va a ser ejecutada cada 0.5 segundos en un ciclo infinito sobre los elementos que pertenezcan a la clase corazon.

Finalmente solo faltaría definir algún elemento HTML con la clase corazon como se muestra en el siguiente código HTML:

<div class="corazon">&#x2665;</div>

El código &#x2665; contenido dentro del div con la clase corazon es el carácter con el símbolo de un corazón (♥), el cual tendrá el estilo de la clase corazon y estará animado por la definición de latidos.

Bien, espero te sirva de algo! y asta luego.

Fitorec

Me gusta la programación, me fascina el software libre, mis lenguajes preferidos son PHP, JavaScript, Python y Bash (aunque me gusta programar en casi cualquier lenguaje), en sistemas operativos me gusta GNU/Linux.

Más Entradas - Website

Sígueme:
TwitterGoogle PlusYouTubeDelicious

Una Respuesta al comentario

  • Juan  11 noviembre, 2016 at 11:33

    Gracias me fui muy util

    Responder

Deja un comentario

Por favor, introduzca su nombre. Please enter an valid email address. Por favor, introduzca un mensaje.