CLOSE MENU

CSS animation: The Bounce Effect!

Get Quote

CSS animation: The Bounce Effect!

Development and CSS animation
By Nadine Naicker June 21

Having a website is a necessity if you’re a business owner in the twenty-first century. Having a GREAT website will do even more wonders for your business! It is always nice to add a simple CSS animation to add that extra touch to your website. Even simple movements can add the right amount of quirk you need to create a site that your viewers will want to interact with! Today, we learn how to make an image bounce on a WordPress website (learn how to create a custom page template in WordPress, here).

Our development guru has been extra nice and provided you with this little bit of info to give your website an extra boost of interaction! The example we are going to use for our CSS animation is Busyballers.com.

CSS animation on website

A CSS animation to liven up your website

Our aim is to give each of these cute characters and their circles movement, more namely a beautiful bounce.

Let’s start

The <div> tag defines a division or a section in an HTML document. The div tag is used to group block-elements to format them with CSS. So each of the services in the image above are divs with classes:

Classes – .mantra-block-1

Additional Services – .mantra-block-2

Age Groups – .mantra-block-3

Add bounce and joy

Once we’ve established the images div tags, we need to give each image we want to animate a class called bounce.  Simply add this into your code. Each will look like this:

Classes – .mantra-block-1 bounce

Additional Services – .mantra-block-2 bounce

Age Groups – .mantra-block-3 bounce

Add in some cool code

The next step is pretty plain and simple – our developer has even typed it out for you! In your stylesheet, you will add the following piece of code:

@keyframes bounce {
 0%, 20%, 60%, 100% {
   -webkit-transform: translateY(0);
   transform: translateY(0);
 }

 40% {
   -webkit-transform: translateY(-20px);
   transform: translateY(-20px);
 }

 80% {
   -webkit-transform: translateY(-10px);
   transform: translateY(-10px);
 }
}

The final touch

Your website’s features will soon be bouncing around and making viewers smile – there’s just one last step. Add the final bit of CSS animation code to make the image bounce when you hover over anywhere within that div:

.mantra-block-1:hover img, .mantra-block-2:hover img, .mantra-block-3:hover img {
 animation: bounce 1s;
}

Happy bouncing!

Tell your friends:

Leave a Reply

GET OUR NEWSLETTER

Don’t be the last to the party. Join our newsletter for monthly updates,
social tips and occasional fashion faux pas.
  • Date Format: MM slash DD slash YYYY