
Demo:
What do you need to do?
To create the CSS Heart Shape & Heartbeat Animation follow the steps below and watch the video tutorial:
- 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 shape:
.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);
}
}
Watch also the video tutorial:
Enjoy coding!
Read also:
Fast & easy CSS Valentine’s Day Animation (Heartbeat)