Create Pulse Effect With CSS3 Animation

In this tutorial you will learn how you can create a heartbeat pulse effect with CSS3. CSS3 gives us some added ability to CSS animation, with animation you can set key frame points to animate to. These will make sure at certain points of the whole animation it will reach this target. Here we are going to create a button and make the button grow and shrink just like having a pulse effect. View the Demo to see what we are going to create.

#Create The CSS Button

First we need to create the button with a CSS class of button and pulse.

<a href="#" class="button pulse">Click here</a>

#The CSS

To start with we are going to make the button so we can see if this grows.

.button{ 
	display: inline-block;      
	width: 150px; 
	padding: 20px; 
	text-align: center; 
	background: whiteSmoke;
	font-weight: bold;
	color: #444;
	text-decoration: none;
	border: 1px solid #888;
}

As the button is built we can add the CSS animation to create the pulse effect. Start off by adding the keyframes for the animation.

@keyframes pulse_animation {
	0% { transform: scale(1); }
	30% { transform: scale(1); }
	40% { transform: scale(1.08); }
	50% { transform: scale(1); }
	60% { transform: scale(1); }
	70% { transform: scale(1.05); }
	80% { transform: scale(1); }
	100% { 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 button we need to add the following.

.pulse {
	animation-name: pulse_animation;
	animation-duration: 5000ms;
	transform-origin:70% 70%;
	animation-iteration-count: infinite;
	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.

#Browser Support

Please note that this is using the -webkit- command so the animation will only work in Chrome or Safari. View the demo to see the effect this CSS creates.