Techumber

Lovely Heart Beat Effect Using Pure CSS3

Github avatar
November 27, 2013.6 min read

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="//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.68, -0.55, 0.265, 1.55) 0s; -moz-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; -ms-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; -o-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 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.68, -0.55, 0.265, 1.55) 0s; -moz-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; -ms-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; -o-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 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......


...