We can create a simple heartbeat animation using HTML and CSS without much coding. The only thing we need to do is to add a box and use CSS to display it. First, add a visual box to the page
<body>
<div class="heart"></div>
</body>
Then, make a heart-shape box
.heart{
position:relative;
width:100px;
height:100px;
margin:100px;
}
.heart:after,
.heart:before{
position:absolute;
width:60px;
height:100%;
background-color:#ff6666;
content:"";
border-radius:50% 50% 0 0;
}
.heart:before{
left:0;
transform:rotate(-52deg);
}
.heart:after{
right:0;
transform:rotate(49deg);
}
Finally, set up the animation. It’s worth noticing that the animation must be used with @key frames because the animation does not have animation frames.
animation:scale 1s linear infinite;
/*T = 1s inifnite loop*/
@keyframes scale{ /*animation*/
50%{transform:scale(2)}
}
Check out the result:
