Lovely Heart Beat Effect Using Pure CSS3

Hi, guys. As I promised in my previous post today I'm gonna share you another cool CSS3 effect. In this tutorial we will use CSS3 animation, transition, transform property to create this effect. Let's just start.


demo download

Let's first create a HTML first.

index.html

<!doctype html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>CSS3 Heart Beat:techumber</title>  
<link rel="stylesheet" href="style.css" />  
</head>  
<body>  
<h1 class="logo"><a href="http://techumber.com">Techumber</a></h1>  
<figure class="heart-wrap">  
<figure class="heart"></figure>  
</figure>  
</body>  
</html> 

We are not using any images for our heart symbol. We will create the heart symbol in CSS. Let's create a style.css file and start adding code.

*{ 
border: 0;  
margin: 0;  
padding: 0;  
webkit-box-sizing: border-box;  
-moz-box-sizing: border-box; 
-ms-box-sizing: border-box; 
-o-box-sizing: border-box; 
-box-sizing: border-box; 
} 
body{  
background: #1A1A1A;  
} 
.heart-wrap{ 
position: relative;  
display: block;  
width: 300px;  
height: 300px;  
margin: 0 auto;  
z-index: 0;  
border: 1px solid #AA5EDF;  
border-radius: 50%;  
} 

Here we have basic reset and heart-wrap is used as heart holder. Now let's create our actual heart class.

.heart{ 
position: absolute;  
top: 50%;  
left: 50%;  
width: 100px;  
height: 90px;  
margin-top: -35px;  
margin-left: -50px;  
z-index: 5;  
-webkit-transition: all 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) 0s; 
-moz-transition: all 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) 0s; 
-ms-transition: all 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) 0s; 
-o-transition: all 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) 0s; 
transition: all 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) 0s;  
-webkit-animation: beat 1s infinite ; 
-o-animation: beat 1s infinite ; 
animation: beat 1s infinite ;  
} 

.heart:before, .heart:after { 
position: absolute;  
content: "";  
left: 50px;  
top: 0;  
width: 50px;  
height: 80px;  
background: #AA5EDF;  
border-radius: 50px 50px 0 0;  
-webkit-transform: rotate(-45deg); 
-moz-transform: rotate(-45deg); 
-ms-transform: rotate(-45deg); 
-o-transform: rotate(-45deg); 
transform: rotate(-45deg);  
-webkit-transform-origin: 0 100% 0; 
-moz-transform-origin: 0 100% 0; 
-ms-transform-origin: 0 100% 0; 
-o-transform-origin: 0 100% 0; 
transform-origin: 0 100% 0;  
} 
.heart:after { 
left: 0;  
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
-o-transform: rotate(45deg); 
transform: rotate(45deg);  
-webkit-transform-origin: 100% 100% 0; 
-moz-transform-origin: 100% 100% 0; 
-ms-transform-origin: 100% 100% 0; 
-o-transform-origin: 100% 100% 0; 
transform-origin: 100% 100% 0;  
} 

By using CSS pseudo class we got it as.

If you observer in heart class we have added a css3 animation of keyframe name beat. Now, let's create that animation keyframes.

@-webkit-keyframes beat { 
0% {  
-webkit-transform: scale(1.9); 
-moz-transform: scale(1.9); 
-ms-transform: scale(1.9); 
-o-transform: scale(1.9); 
transform: scale(1.9); 

} 
20%{  
-webkit-transform: scale(0.9); 
-moz-transform: scale(0.9); 
-ms-transform: scale(0.9); 
-o-transform: scale(0.9); 
transform: scale(0.9); 

} 
21%{  
-webkit-transform: scale(1.9); 
-moz-transform: scale(1.9); 
-ms-transform: scale(1.9); 
-o-transform: scale(1.9); 
transform: scale(1.9); 

} 
100% {  
-webkit-transform: scale(0); 
-moz-transform: scale(0); 
-ms-transform: scale(0); 
-o-transform: scale(0); 
transform: scale(0); 

} 
} 
@-moz-keyframes beat { 
0% {  
-webkit-transform: scale(1.9); 
-moz-transform: scale(1.9); 
-ms-transform: scale(1.9); 
-o-transform: scale(1.9); 
transform: scale(1.9); 

} 
20%{  
-webkit-transform: scale(0.9); 
-moz-transform: scale(0.9); 
-ms-transform: scale(0.9); 
-o-transform: scale(0.9); 
transform: scale(0.9); 

} 
21%{  
-webkit-transform: scale(1.9); 
-moz-transform: scale(1.9); 
-ms-transform: scale(1.9); 
-o-transform: scale(1.9); 
transform: scale(1.9); 

} 
100% {  
-webkit-transform: scale(0); 
-moz-transform: scale(0); 
-ms-transform: scale(0); 
-o-transform: scale(0); 
transform: scale(0); 

} 
} 
@-ms-keyframes beat { 
0% {  
-webkit-transform: scale(1.9); 
-moz-transform: scale(1.9); 
-ms-transform: scale(1.9); 
-o-transform: scale(1.9); 
transform: scale(1.9); 

} 
20%{  
-webkit-transform: scale(0.9); 
-moz-transform: scale(0.9); 
-ms-transform: scale(0.9); 
-o-transform: scale(0.9); 
transform: scale(0.9); 

} 
21%{  
-webkit-transform: scale(1.9); 
-moz-transform: scale(1.9); 
-ms-transform: scale(1.9); 
-o-transform: scale(1.9); 
transform: scale(1.9); 

} 
100% {  
-webkit-transform: scale(0); 
-moz-transform: scale(0); 
-ms-transform: scale(0); 
-o-transform: scale(0); 
transform: scale(0); 

} 
} 
@-o-keyframes beat { 
0% {  
-webkit-transform: scale(1.9); 
-moz-transform: scale(1.9); 
-ms-transform: scale(1.9); 
-o-transform: scale(1.9); 
transform: scale(1.9); 

} 
20%{  
-webkit-transform: scale(0.9); 
-moz-transform: scale(0.9); 
-ms-transform: scale(0.9); 
-o-transform: scale(0.9); 
transform: scale(0.9); 

} 
21%{  
-webkit-transform: scale(1.9); 
-moz-transform: scale(1.9); 
-ms-transform: scale(1.9); 
-o-transform: scale(1.9); 
transform: scale(1.9); 

} 
100% {  
-webkit-transform: scale(0); 
-moz-transform: scale(0); 
-ms-transform: scale(0); 
-o-transform: scale(0); 
transform: scale(0); 

} 
} 
@keyframes beat { 
0% {  
-webkit-transform: scale(1.9); 
-moz-transform: scale(1.9); 
-ms-transform: scale(1.9); 
-o-transform: scale(1.9); 
transform: scale(1.9); 

} 
20%{  
-webkit-transform: scale(0.9); 
-moz-transform: scale(0.9); 
-ms-transform: scale(0.9); 
-o-transform: scale(0.9); 
transform: scale(0.9); 

} 
21%{  
-webkit-transform: scale(1.9); 
-moz-transform: scale(1.9); 
-ms-transform: scale(1.9); 
-o-transform: scale(1.9); 
transform: scale(1.9); 

} 
100% {  
-webkit-transform: scale(0); 
-moz-transform: scale(0); 
-ms-transform: scale(0); 
-o-transform: scale(0); 
transform: scale(0); 

} 
} 

we have created beat keyframe.
Finally, Combile all css

style.css

*{ 
border: 0;  
margin: 0;  
padding: 0;  
webkit-box-sizing: border-box;  
-moz-box-sizing: border-box; 
-ms-box-sizing: border-box; 
-o-box-sizing: border-box; 
-box-sizing: border-box; 
} 
body{  
background: #1A1A1A;  
} 
.logo{ 
text-align: center;  
margin: 50px 0;  
font-size: 170px;  
font-family: monospace;  
} 
.logo a{ 
color: #fff;  
} 
.heart-wrap{ 
position: relative;  
display: block;  
width: 300px;  
height: 300px;  
margin: 0 auto;  
z-index: 0;  
border: 1px solid #AA5EDF;  
border-radius: 50%;  
} 
.heart{ 
position: absolute;  
top: 50%;  
left: 50%;  
width: 100px;  
height: 90px;  
margin-top: -35px;  
margin-left: -50px;  
z-index: 5;  
-webkit-transition: all 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) 0s; 
-moz-transition: all 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) 0s; 
-ms-transition: all 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) 0s; 
-o-transition: all 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) 0s; 
transition: all 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) 0s;  
-webkit-animation: beat 1s infinite ; 
-o-animation: beat 1s infinite ; 
animation: beat 1s infinite ;  
} 

.heart:before, .heart:after { 
position: absolute;  
content: "";  
left: 50px;  
top: 0;  
width: 50px;  
height: 80px;  
background: #AA5EDF;  
border-radius: 50px 50px 0 0;  
-webkit-transform: rotate(-45deg); 
-moz-transform: rotate(-45deg); 
-ms-transform: rotate(-45deg); 
-o-transform: rotate(-45deg); 
transform: rotate(-45deg);  
-webkit-transform-origin: 0 100% 0; 
-moz-transform-origin: 0 100% 0; 
-ms-transform-origin: 0 100% 0; 
-o-transform-origin: 0 100% 0; 
transform-origin: 0 100% 0;  
} 
.heart:after { 
left: 0;  
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
-o-transform: rotate(45deg); 
transform: rotate(45deg);  
-webkit-transform-origin: 100% 100% 0; 
-moz-transform-origin: 100% 100% 0; 
-ms-transform-origin: 100% 100% 0; 
-o-transform-origin: 100% 100% 0; 
transform-origin: 100% 100% 0;  
} 

@-webkit-keyframes beat { 
0% {  
-webkit-transform: scale(1.9); 
-moz-transform: scale(1.9); 
-ms-transform: scale(1.9); 
-o-transform: scale(1.9); 
transform: scale(1.9); 

} 
20%{  
-webkit-transform: scale(0.9); 
-moz-transform: scale(0.9); 
-ms-transform: scale(0.9); 
-o-transform: scale(0.9); 
transform: scale(0.9); 

} 
21%{  
-webkit-transform: scale(1.9); 
-moz-transform: scale(1.9); 
-ms-transform: scale(1.9); 
-o-transform: scale(1.9); 
transform: scale(1.9); 

} 
100% {  
-webkit-transform: scale(0); 
-moz-transform: scale(0); 
-ms-transform: scale(0); 
-o-transform: scale(0); 
transform: scale(0); 

} 
} 
@-moz-keyframes beat { 
0% {  
-webkit-transform: scale(1.9); 
-moz-transform: scale(1.9); 
-ms-transform: scale(1.9); 
-o-transform: scale(1.9); 
transform: scale(1.9); 

} 
20%{  
-webkit-transform: scale(0.9); 
-moz-transform: scale(0.9); 
-ms-transform: scale(0.9); 
-o-transform: scale(0.9); 
transform: scale(0.9); 

} 
21%{  
-webkit-transform: scale(1.9); 
-moz-transform: scale(1.9); 
-ms-transform: scale(1.9); 
-o-transform: scale(1.9); 
transform: scale(1.9); 

} 
100% {  
-webkit-transform: scale(0); 
-moz-transform: scale(0); 
-ms-transform: scale(0); 
-o-transform: scale(0); 
transform: scale(0); 

} 
} 
@-ms-keyframes beat { 
0% {  
-webkit-transform: scale(1.9); 
-moz-transform: scale(1.9); 
-ms-transform: scale(1.9); 
-o-transform: scale(1.9); 
transform: scale(1.9); 

} 
20%{  
-webkit-transform: scale(0.9); 
-moz-transform: scale(0.9); 
-ms-transform: scale(0.9); 
-o-transform: scale(0.9); 
transform: scale(0.9); 

} 
21%{  
-webkit-transform: scale(1.9); 
-moz-transform: scale(1.9); 
-ms-transform: scale(1.9); 
-o-transform: scale(1.9); 
transform: scale(1.9); 

} 
100% {  
-webkit-transform: scale(0); 
-moz-transform: scale(0); 
-ms-transform: scale(0); 
-o-transform: scale(0); 
transform: scale(0); 

} 
} 
@-o-keyframes beat { 
0% {  
-webkit-transform: scale(1.9); 
-moz-transform: scale(1.9); 
-ms-transform: scale(1.9); 
-o-transform: scale(1.9); 
transform: scale(1.9); 

} 
20%{  
-webkit-transform: scale(0.9); 
-moz-transform: scale(0.9); 
-ms-transform: scale(0.9); 
-o-transform: scale(0.9); 
transform: scale(0.9); 

} 
21%{  
-webkit-transform: scale(1.9); 
-moz-transform: scale(1.9); 
-ms-transform: scale(1.9); 
-o-transform: scale(1.9); 
transform: scale(1.9); 

} 
100% {  
-webkit-transform: scale(0); 
-moz-transform: scale(0); 
-ms-transform: scale(0); 
-o-transform: scale(0); 
transform: scale(0); 

} 
} 
@keyframes beat { 
0% {  
-webkit-transform: scale(1.9); 
-moz-transform: scale(1.9); 
-ms-transform: scale(1.9); 
-o-transform: scale(1.9); 
transform: scale(1.9); 

} 
20%{  
-webkit-transform: scale(0.9); 
-moz-transform: scale(0.9); 
-ms-transform: scale(0.9); 
-o-transform: scale(0.9); 
transform: scale(0.9); 

} 
21%{  
-webkit-transform: scale(1.9); 
-moz-transform: scale(1.9); 
-ms-transform: scale(1.9); 
-o-transform: scale(1.9); 
transform: scale(1.9); 

} 
100% {  
-webkit-transform: scale(0); 
-moz-transform: scale(0); 
-ms-transform: scale(0); 
-o-transform: scale(0); 
transform: scale(0);  
} 
} 

Hope you like it. Thanks......

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.