CSS

Create Pulse Effect With CSS3 Animation

Heart beat

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.

Demo

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

Demo

Back to top ^

Join Paulund

  • Get access to 100s of premium tutorials and downloadable content
  • Members content consists of Premium WordPress plugins, CSS packages, jQuery packages, tutorial demo files and templates for 100s of web development tutorials
  • In-depth development tutorials
  • Priority tutorial requests
  • Priority email development support
  • No ads

Here at Paulund you'll find Web Development tutorials and snippets focusing mainly on PHP, WordPress and CSS. Members will get access to premium tutorials that go into more detail about development with these languages. You will also get access to downloadable premium content based on the tutorial.

Join Paulund

Leave a Reply

Your email address will not be published. Required fields are marked *