CSS Beginners Guide part 14 - Transitions and Animations | Lessoncup Programming Blog

Friday, 1 November 2013

CSS Beginners Guide part 14 - Transitions and Animations

Now it's time to animate the elements with css3 using transitions and animations properties, before this the web designers prefer javascript or flash to make some kind of animations, some people believe it is very difficult to animate the elements using css3, this feature is very useful to web designers they can put large animations made by css3 and it wont take much time to load in web sites like flash, new version browser only support to this feature.

before work with css3 transitions and animations we should know the difference between both, CSS transitions are applied to elements to change one style to another style gradually, Animations are entirely different you want do animate the elements you should know about @keyframes rules, you can change the styles of animation as many time as you want

How the Transitions are work ?
there is two things you must specify to do transitions, add an effect to css property to specified element and specified the duration of transition, if you not specified the duration you cant see the transition effect because by default the duration value is 0.
<style>

// we set the div color to green

div{

width:50px;
height:50px;
background-color:green;
transform: background-color 2s;
-ms-transform: background-color 2s; // IE Browser
-webkit-transform: background-color 2s; // for Safari and Chrome
-moz-transform: background-color 2s; // for Mozilla
-o-transform: background-color 2s; // for Opera

}

// when over the mouse the div change the color to pink in 2 seconds


div:hover{

background-color:pink;

}

</style>

How the Animations are work?
the animation will not work until we put the keyframes rule, we specify the animation rule inside the keyframes, we should define animation rule how the animation will start and end, we can give a custom name to animation rule, later we bind the custom name to selector.
<style>

// creating the animation rule using @keyframes

@keyframes myFirst{

from{color:green;}

to{color:black;}

}

// binding the myFirst animation to Paragraph tag

p{

color:green;
animation:myFirst 2s;
-ms-transform: myFirst 2s; // IE Browser
-webkit-transform: myFirst 2s; // for Safari and Chrome
-moz-transform: myFirst 2s; // for Mozilla
-o-transform: myFirst 2s; // for Opera

}

</style>

No comments :

Post a Comment

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons