Sunday, September 28, 2014

How to bounce an object with animated effect in css3

 Hi friends, hope you are doing well. I am busy with my work so I can't post here regularly. Today I will teach you how to make an animated effect to an object, text or an image that bounces from left side of the page. In this tutorial I have used CSS3 styles to make animated effect to an image. In my latest project I came across a requirement where the logo (black and white) of the website must bounce from leftside and it stops at some point. There the image should be turned into it's original color. For this I have used JQuery. But I'm not giving you the whole code for the above requirement. Here I want to discuss only about the animated effect to bounce an object. Since I have used CSS3 it will be more effective than JQuery.

Demo:

Tricks Town 

 Look at the below code.
CSS3 code for animation effect:
<style>
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }

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

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

</style>

How to use this in HTML?
Look below HTML demo code that shows how to use the CSS classes in HTML.
HTML:
<a href="http://www.trickstown.com/" title="Home Page" target="_blank">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6bVcUZQgsuQJXzW-NpmHmKKPOGi-rk-wcn4nCI1H_Fd6ZGgWmY1DSGfZ1BK1dY2ieU4p4wzbdXQhyphenhyphenGXGnKByv5rXIia3fXlG1CRrLbeHc84Oq0tdjOHmUitLhCkLl5jQAY7B1MPkBrMs/s1600/trickstown.png" alt="Tricks Town" class="animated bounceInLeft" />
</a>
Use  class="animated bounceInLeft" in your HTML where ever you need the animation effect.

Ask your queries if any.

Demo:

Tricks Town

0 comments: