52
Como animar un corazón con keyframes (Básico)
Mi intención con esto es explicar como animar el corazón sin tener que dibujarlo con CSS3, en este caso es solo importar un icono o una imagen, esto va más que todo orientado a las personas que están comenzando a probar keyframes ya posteriormente en otro post explicaré como crear el corazón con puro CSS.
Empezamos con lo más simple de todo, el HTML, en este caso yo estare importando de Font Awesome y tomando este icono <i class="fas fa-heart"></i> con esto ya tendremos el HTML.
Ahora, como soy medio flojo agarre un color gradiente de una página web llamada CSS Gradient y seleccione el que más me gusto, ustedes pueden hacer lo mismo, luego al body le di estos estilos para poder centrar el elemento.
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
Hasta este momento vamos de esta forma:
Siguiendo con el corazón, usaré la clase que ya trae cuando importamos el icono para así darle su estilo y luego poder animarlo.
Solo le daremos dos estilos a la clase
.fa-heart {
font-size: 6rem;
color: #ee2130;
}
Ya tenemos un corazón.
Pasemos a la etapa final que es animarlo para que parezca que está latiendo.
Para poder usar el keyframe necesitamos darle un nombre al corazón dentro del CSS utilizando la misma clase anterior.
También le indicaremos que la animación dure 1s y que se repita de forma infinita.
.fa-heart {
font-size: 6rem;
color: #ee2130;
animation-name: heart;
animation-duration: 1s;
animation-iteration-count: infinite;
}
Sigamos ahora con el keyframe y le diremos que cuando tenga un 25% tenga una propiedad transform y que escale 1.2 su tamaño original.
@keyframes heart {
5% {
transform: scale(1.2);
}
Ya con esto parecerá que está latiendo como un corazón normal, como pueden ver es algo sencillo y para nada difícil emplear una animación bien simple.
Pueden seguirme en mis redes sociales por este enlace.
El banner que use Pankaj Patel está en la plataforma de Unsplash
y la imagen puntualmente es esta: banner
52