CSS3 Transition is one of the coolest feature that can help achieve some of the effects of animation using CSS only. It is one of the specs of W3C working drafts but it is not supported in IE 8 and 9 beta.The browsers which support this property are Google chrome 7+,Opera 10+,Mozilla firefox 4.0 beta,webkit browser safari.Transition property is not .
Q.What is css3 transition? Ans: CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration
Q.What are the properties of CSS3 transition?
Ans:It includes four properties
1. transition-property:Specifies the name of properties to which transition is applied.Initial it is all.
2. transition-duration: property defines the length of time that a transition takes.Initial 0.
3. transition-timing: property describes how the intermediate values used during a transition will be calculated.Initial value is ease.
4. transition-delay: property defines when the transition will start.initial 0.
In short we can write these as transition:[proprty] [duration] [timing] [delay]
Css3 Transition
body
{
padding: 0px;
margin: 0px;
}
.imageGallery
{
position:fixed;
bottom:30%;
margin-left:15px;
}
ul.wrapper li
{
padding: 0 5px;
margin: 0 5px;
list-style: none;
float: left;
}
ul.wrapper li img
{
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-0-border-radius: 5px;
-webkit-transition: -webkit-transform 0.5s ease-in-out;/*this property will create animation*/
-moz-transition: -moz-transform 0.5s ease-in-out;
transition: transform 0.2s ease-in-out;
}
ul.wrapper li a:hover img
{
-webkit-transform: scale(1.5);/*this properties enlarge the image*/
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}