CSS3 Heart Pulsating Animation

In this post, we are going to create a simple heartbeat effect using CSS3. To create this effect we are going to use CSS3 Keyframes animation.

See Also : Simple Card Flip Animation With CSS3

Note : This effect will work with only browsers that support Keyframes animation.

HTML

<div class="container">
	<a href="http://coffeecupweb.com/">
		<img class="heart" src="heart.png" />
	</a>
</div>

The markup consist of a <img> tag element with an anchor tag, wrapped inside a div with class .container.

CSS

.container{
	width: 400px;
	text-align: center;
	margin: 100px auto;
}
.heart{
	width: 200px;
	height: auto;
	-webkit-animation: pulse .6 infinite alternate;
	-moz-animation: pulse .6s infinite alternate;
	animation: pulse .6s infinite alternate;
}
@-webkit-keyframes pulse{
	0% { transform: scale(1); }
	25%{ transform: scale(1.2);}
	50%{ transform: scale(1);}
	100% { transform: scale(1); }
}
@-moz-keyframes pulse{
	0% { transform: scale(1); }
	25%{ transform: scale(1.2);}
	50%{ transform: scale(1);}
	100% { transform: scale(1); }
}	
@keyframes pulse {
	0% { transform: scale(1); }
	25%{ transform: scale(1.2);}
	50%{ transform: scale(1);}
	100% { transform: scale(1); }
}

As you can see, we are going to change the scale of the image at 25% to 1.2 and then put it back to normal at 50%.

@keyframes pulse {
	0% { transform: scale(1); }
	25%{ transform: scale(1.2);}
	50%{ transform: scale(1);}
	100% { transform: scale(1); }
}

To apply this effect we are using the animation property.

animation: pulse .6s infinite alternate;

 

0 Comments

Leave a Comment.