Create a Simple Pulse/Bounce CSS3 Animation Tutorial

Animation adds life to a boring website. It allows us to improve the user interaction with the website. CSS3 animations are important part of modern web design trend. Almost every web designer is taking advantage of CSS3 properties to create stunning animations. It does not slows down website loading speed. All modern web browsers e.g. Chrome, firefox, safari. supports CSS3 animation properties. Some properties need css prefixes to make them cross browser compatible.

Clients often demands to add zoom in, zoom out, fade in, fade out, pulse and bounce animations. Usually these effects are added on main website headings, subscribe forms or link buttons. Learning CSS animations is necessity because it has become part of modern web design and is often demanded by clients to add some cool and attention grabbing animations.

In this tutorial we will create Pulse/Bounce animation effect with CSS3 properties. At the end of this tutorials you will have a CSS3 Bounce animation ready to add in to you project.

HTML Structure


<div class="sdm-contain">
<a href="#" class="sdm-bounce">Infinite Pulse</a>
</div>

That’s it. This is the only Html we need to starting working on further. I choose anchor link. because it is one the most common interaction point. I have used two classes. Parent class will have only generic css to center align the alignment for the purpose of this tutorial.

General CSS


body {
background-color: lightblue;
}
.sdm-contain {
max-width: 600px;
margin: 200px auto 0;
text-align: center;
}

As you can see this is just general css to center align the button.

Button Styling



.sdm-bounce {
color: white;
background-color: crimson;
display: inline-block;
font-size: 18px;
text-decoration: none;
text-transform: uppercase;
padding: 16px 32px;
}

CSS Keyframe Animation


@keyframes bounce {
0% {
transform: scale(1);
}

50% {
transform: scale(1.1);
}

100% {
transform: scale(1);
}
}

This is the main css that will animate your html element. Like any other animation the animation will start from zero percent and will finish on 100% percent. We are using Css transform property that is changing the actual size of the element. We defined the size of the anchor link using padding in our general css.

Now to actually animate the html element. We must initialize it by including it in button styling css and giving it a time to complete this transformation.

Just include following line at the end of button styling css



.sdm-bounce {

animation: bounce 1s ease infinite;

}

Now your bounce/pulse css3 animation run smoothly. You can change time to increase or decrease the completion time of keyframe animation.

That's it. Your tutorial is complete. But this is just the beginning. You can do much more in this animation instead of just changing element size. I am gonna take this tutorial like further and enhance this animation little further by changing the background color.

If you understood this tutorial then you should be able to do this your self.

Change the browser window and try to do it yourself. then come back and check the solution

Changing background color with CSS3 animation



@keyframes bounce {
0% {
transform: scale(1);
background-color: red;
}

50% {
transform: scale(1.1);
background-color: blue;
}

100% {
transform: scale(1);
background-color: yellow;
}
}

You can also change order css properties within keyframe for example border-radius, border property etc.

Html block has 4 sides. you can change border-radius or border property on different intervals and create cool and attention grabbing css3 animations.

guppuboss

I am a Full Stack Web Developer. I have good command over WordPress and Laravel framework. I like gaming, movies and touring to north area in holidays. I believe in knowledge sharing so keep visiting StormTuts.com :)

Leave a Reply

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