September 11, 2014

How to create a pulse effect with CSS3 Animation?

Create a pulse effect with CSS3 Animation

On the other tutorial i have showed How to create a pulse effect on hover using jQuery? and How to create a pulse effect with jQuery?

I will show you how you can create a heartbeat pulse effect with CSS3.

First we need to create heart. For that i am using Font Awesome. You can see the CSS file for that in the Attachment section below in this post.


<a href="#" class="heart pulse"><i class="fa fa-heart"></i></a>

To start with we are going to make the heart so we can see it beats.


.heart {
     color: #E41B17;
     font-size: 100px;
     text-decoration: none;

As the Heart is built we can add the CSS animation to create the pulse effect.

Start off by adding the keyframes for the animation.


@-webkit-keyframes pulse_animation {
 0% { -webkit-transform: scale(1); }
 30% { -webkit-transform: scale(1); }
 40% { -webkit-transform: scale(1.08); }
 50% { -webkit-transform: scale(1); }
 60% { -webkit-transform: scale(1); }
 70% { -webkit-transform: scale(1.05); }
 80% { -webkit-transform: scale(1); }
 100% { -webkit-transform: scale(1); }

This says that for the duration of the animation we are going to change the scale of the button to 1.08 at 40% of the duration and then put it back to normal then at 70% of the duration change the scale to 1.05.

To use this on the pulse heart we need to add the following.


.pulse {
 -webkit-animation-name: 'pulse_animation';
 -webkit-animation-duration: 5000ms;
 -webkit-transform-origin:70% 70%;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;

This will run the pulse_animation with a duration of 5000ms. Note that the iteration-count is set to infinite so it will last forever, you can change this to a number if you only want it to pulse a couple of times.


I have used external attachments.

<link href="//" rel="stylesheet">


Please note that this is using the -webkit- command so the animation will only work in Chrome or Safari.


No comments:

Post a Comment

Popular Posts