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……