- Heart animation using CSS
Hello friends, Welcome to my Website "CodeWithMe". In this Website, my website is all about coding and I share that knowledge with you.
So friends,Today in this blog i will create a vibrating & animating heart shape using CSS pseudo selectors - before & after.
.png)
- 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.
In the first part, we learned how to draw heart shape using CSS3
Now let's see how to animate it to create a heartbeat animation.
.png)
- 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.
In the first part, we learned how to draw heart shape using CSS3
Now let's see how to animate it to create a heartbeat animation.
Creating 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
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
Add the keyframes to the Heart container
Here animation property accepts three values,
.png)
animateHeart is the animation-nameanimation-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 as infinite, then it will run the animation infinitely after every X seconds which is defined in the animation-duration column
Checkout the codepen for complete code along with the heart shape.
Here animation property accepts three values,
animation-durationdefines how long do we need to run each animation. If we define 2s, then each time it runs for 2sanimation-iteration-countwill 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-durationcolumn
.png)
animateHeart is the animation-nameCheckout the codepen for complete code along with the heart shape.
--Download Source Code--
-html file-
-CSS file-
You also learn many programming languages such as C language, C++, Python & CSS etc. Please Subscribe my First YouTube channel, my motive behind creating this channel is to connect more and more with you.
Please do subscribe & press the bell icon of my channel if You like, learn & love this.
.png)
.png)
.png)
