Pulsing heart | CSS
.heart {
position: relative;
width: 34px;
overflow: inherit;
-webkit-animation: animateHeart 2.5s infinite;
animation: animateHeart 2.5s infinite;
}
.heart:before,
.heart:after {
position: absolute;
content: '';
top: 0;
left: 17px;
width: 17px;
height: 27px;
background: #3C948B;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg) translateZ(0);
transform: rotate(-45deg) translateZ(0);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart:after {
left: 0;
-webkit-transform: rotate(45deg) translateZ(0);
transform: rotate(45deg) translateZ(0);
-webkit-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
@-webkit-keyframes animateHeart {
0% { -webkit-transform: scale(1); }
5% { -webkit-transform: scale(1.2); }
10% { -webkit-transform: scale(1.1); }
15% { -webkit-transform: scale(1.3); }
50% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(1); }
}
@keyframes animateHeart {
0% { transform: scale(1); }
5% { transform: scale(1.2); }
10% { transform: scale(1.1); }
15% { transform: scale(1.3); }
50% { transform: scale(1); }
100% { transform: scale(1); }
}