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.

HTML

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

CSS

.heart {
     text-align:center; 
     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.

CSS

@-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.

CSS

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

Attachments:

I have used external attachments.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Note:

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

demo

No comments:

Post a Comment

Popular Posts

Views