CSS can be used to change the appearance of a browser element by adding animation effects to it such as rotation, transform, scale and many more.CSS transitions are used to control the speed of animation changes to elements over an interval of time following an acceleration curve that can be customized.
NOTE:
These effects are not supported by I.E. 8 but they work fine in I.E. 9, Firefox, Opera, Google Chrome and Safari. For I.E 9 prefix -ms is used. Firefox uses the prefix -moz, Opera uses -o while Chrome and Safari make use of -webkit.
Here I have demonstrated css animations by taking tag and applying animation effects. I have used transformation property of css in response to a mouseover event.
Rotation Effect:- The rotate property is responsible for rotating an element clockwise around its origin for a specified angle.
Scaling Effect:- The scale property specifies a 2D scaling operation.
Shadow Effect:- The box-shadow property implements multiple drop-shadows on box elements.
Transition Effect:- The individual components of transition are:
transition-property:Here the names of the CSS properties to which transitions should be applied are specified and are animated during transitions. transition-duration: Here the duration over which the transition should occur is specified. transition-timing-function: Here a cubic bezier curve or acceleration curve determines how the intermediate values of transition should be calculated. These are viz. linear, ease, ease-in, ease-out and ease-in-out. transition-delay: Here waiting time between change in property and beginning of actual transition is specified.
.divBox
{
border:2pxdashedOlive;
margin:20px700px30px400px;
width:200px;
height:50px;
}
.divBox:hover
{
-moz-transform:rotate(360deg)scale(2);
-moz-transition:all1sease-in-out0s;
border:1pxsolidGray;
-moz-box-shadow:4px4px4pxBlack;
}
DIV BOX