
New: Check also pure CSS Heart Shape & Heartbeat Animation.
Demo:
What do you need to do?
You need to have an image of the heart in .png format (you can use mine below) and:
- Add HTML
- Add CSS
- Add CSS Animation

Step1
Add HTML
<div class="valentinesDay">
<h1>Happy Valentine's Day!</h1>
<img src="https://lenadesignorg.files.wordpress.com/2020/02/heart.png?w=640" class="heart" alt="heart" />
</div>
Step2.
Add CSS
Set the color and the position of the background and elements:
body {
background-color: #E1594C;
color: white;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.valentinesDay {
position: relative;
}
.heart {
position: relative;
}
Step3.
Add CSS Animation
Add to .heart:
animation: .8s infinite beat;
and add @keyframes to create the Heartbeat:
@keyframes beat {
0% {
transform: scale(1);
}
25% {
transform: scale(1.1);
}
40% {
transform: scale(1);
}
60% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
Enjoy coding!
Read also: