Friday, July 11, 2014

CSS 3 Transitions: An introduction ...

Using CSS3 we can create awesome transactions with out using JavaScript. If you want to have animate one of your element, add the following CSS:
.class_of_your_elemt {
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}
In CSS3 transitions there are different types of timings are there.
Different timing functions
Ease
Ease In
Ease Out
Ease In Out
Linear
Custom
The basic syntax for a CSS3 transition is of the form:
transition:  [  ||
                ||
                ||
                ]
Using this tool Ceaser CSS Easing Tool you can customize your timing transitions.
 An example of CSS3 Transistions
.example {
  transition-property: top, left, border-radius, background-color;
  transition-duration: 2s, 1s, 0.5s, 0.5s;
  transition-delay: 0s, 0.5s, 1s, 1.5s;
}

0 comments: