Last year I posted the tutorial Fast & easy CSS Valentine’s Day Animation (Heartbeat), were to create the heartbeat I used the .png file. Today I will show you how to create the heart shape and heartbeat animation using just pure CSS.

*to see the live output of the animation click here.
What do you need to do?
- Add HTML
- Add CSS
- Add CSS Animation
Step1.
Add HTML
<div class="container">
<div class="heart"></div>
</div>
Step2.
Add CSS
Set the colour and the position of the background and the elements:
body {
background-color: #fae1dd;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
position: relative;
animation: .8s beat infinite;
}
Create the heart:
.heart {
position: relative;
background-color: red;
display: inline-block;
height: 60px;
top:0;
left:0;
transform: rotate(-45deg);
width:60px;
}
.heart:before, .heart:after {
content:"";
background-color: red;
border-radius:50%;
height: 60px;
width: 60px;
position: absolute;
width: 60px;
}
.heart:before {
top:-30px;
left:0;}
.heart:after {
left:30px;
top:0;}
Step3.
Add CSS Animation
@keyframes beat {
0% {
transform: scale(1);
}
25% {
transform: scale(1.1);
}
40% {
transform: scale(1);
}
60% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
To see the live output of the animation go to lenastanley.com.
Watch also the video tutorial:
Enjoy coding!