How to Use CSS3 Transition and Animation Effects?

Let me show you a great way to use CSS3 transition and animation effects in your website awesomely in this article. It’s about CSS3 which is the updated version of CSS (Cascading Style Sheets).

Why actually we should use the new features of CSS which termed as CSS3 because it helps you to build modern sites that are able to make use of some of the newer, exciting parts of CSS. However, you can also animate any text using jQuery plugin as Textillate does. But in today we can simply use CSS3 to accomplish the same job as jQuery does.

1. CSS3 Transitions

Let’s start by transitions… What these are? And what they do? Okay…

Transition is an awesome effect in CSS3 which changes the element’s state from one condition to another without using flash animation or javascript. If you haven’t used transitions before, here’s a brief introduction.

On applying the following code over an HTML element wrap by divs like this (

):

 .img {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

You can see that the element will gradually animate for a second as stated in the above codes (all 1s ease-in-out).

Okay, stepping ahead on animations effect. How CSS3 can help you to animate web elements, today.

2. CSS3 Animations

We can easily animate the web elements, let me tell you how…

To animate something with CSS, you first specify some keyframes for the animation – basically what styles will the element have at certain times. The browser does the tweening for you.

Code:
HTML Code:
<div id="box">
</div>

CSS3 Code:
@keyframes resize {
  0% {
    padding: 0;
  }
  50% {
    padding: 0 20px;
    background-color:rgba(255,0,0,0.2);
  }
  100% {
    padding: 0 100px;
    background-color:rgba(255,0,0,0.9);
  }
}

#box {
  animation-name: resize;
  animation-duration: 1s;
  animation-iteration-count: 4;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}