Scribd
Cargar
237 vistas2 páginas

Animación Corazón CSS3 con Keyframes

Este documento explica cómo crear una animación de latido de corazón utilizando solo una keyframe de CSS3. Define una animación llamada "latidos" que aumenta ligeramente el tamaño del elemento a la mitad y luego vuelve a su tamaño normal, y la aplica a un elemento con la clase ".corazon" para que se repita indefinidamente cada 0.5 segundos. Esto crea un efecto de latido suave para un corazón representado por el carácter "?" dentro de un div.

Cargado por

Andres Alvarez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
237 vistas2 páginas

Animación Corazón CSS3 con Keyframes

Este documento explica cómo crear una animación de latido de corazón utilizando solo una keyframe de CSS3. Define una animación llamada "latidos" que aumenta ligeramente el tamaño del elemento a la mitad y luego vuelve a su tamaño normal, y la aplica a un elemento con la clase ".corazon" para que se repita indefinidamente cada 0.5 segundos. Esto crea un efecto de latido suave para un corazón representado por el carácter "?" dentro de un div.

Cargado por

Andres Alvarez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

Blog mundosica.

com
Blog - soluciones integrales en computación áplicada
http://www.mundosica.com/blog

Animación de corazón CSS3 usando keyframe


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% { transfo


rm: 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 #45
0505; 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:

1/2
Blog mundosica.com
Blog - soluciones integrales en computación áplicada
http://www.mundosica.com/blog

El código ? 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.

2/2
Powered by TCPDF (www.tcpdf.org)

También podría gustarte