Heart beat animation using CSS
In the first part, we learned how to draw heart shape using CSS3
Now lets see, how to animate it to create a heart beat animation.
These are the steps to create the animation
- Create a keyframe animation for heart beat
- scale the heart to bigger and smaller size using transform property at different intervals.
- Create a infinite animation on the container using the created keyframe.
Creating the CSS keyframes for animating heart
Inorder to give the heart throbbing effect, we scale the heart at different intervals. Its upto us to play around the intervals to get the desired effect.
Keep in mind, while drawing the heart shape, we have rotated the container with 45deg. We need to keep that in our keyframe transform, else the shape with be tilted during animation
@keyframes animateHeart {
// scale down and scale up faster in irregular intervals to get the throbbing effect
0% {
transform: rotate(45deg) scale(0.8);
}
5% {
transform: rotate(45deg) scale(0.9);
}
10% {
transform: rotate(45deg) scale(0.8);
}
15% {
transform: rotate(45deg) scale(1);
}
50% {
transform: rotate(45deg) scale(0.8);
}
100% {
transform: rotate(45deg) scale(0.8);
}
}
Add the keyframes to the Heart container
Here animation property accepts three values,
.heart {
transform: rotate(45deg);
// animation: <animation-name> <animation-duration> <animation-iteration-count>
animation: animateHeart 1.2s infinite;
}
- keyframes which we defined earlier
animateHeart
is theanimation-name
animation-duration
defines how long do we need to run each animation. If we define 2s, then each time it runs for 2sanimation-iteration-count
will run that many times. If we define it asinfinite
, then it will run the animation infinitely after every X seconds which is defined in theanimation-duration
column
Checkout the codepen for complete code along with the heart shape.