Using CSS3 it is possible to create various visual effects that used to require JavaScript, the Adobe Flash plug-in, GIF animation or embedded media.
Transitions
A CSS transition changes an element from one style to another. Here's a simple example:
Source:
<style>
#trans01
{
width:100px;
height:100px;
background:#f00;
transition:background 1s;
}
#trans01:hover
{
background:#000;
}
</style>
<div id="trans01"></div>
In the above example, hovering over the element is changing its background color from #f00 to #000.
The transition:background 1s; line is telling the browser how long the transition should last in seconds.
Here's another example with additional style tags added:
Source:
<style>
#trans02
{
width:100px;
height:100px;
background:#0c0;
transition:width 1s, background 1s, height 1s;
}
#trans02:hover
{
width:100%;
height:20px;
background:#f0f;
}
</style>
<div id="trans02"></div>
Note that in the example above, each of the transitions is given a specific time:
transition:width 1s, background 1s, height 1s;
If a time is not specified, the transition will happen instantly.
And a few more:
Source:
<style>
#trans03
{
width:100px;
height:100px;
background:#fc0;
box-shadow: 7px 7px 5px #bbb;
border: #000 dotted 3px;
border-radius: 20px;
transition:width 5s, background 5s, height 5s, border 5s, border-radius 5s;
}
#trans03:hover
{
width:100%;
height:20px;
background:#fff;
border: #c00 solid 2px;
border-radius: 0;
}
</style>
<div id="trans03"></div>
Source:
<style>
#trans04
{
width:20px;
height:20px;
border: #000 solid 1px;
background: #fff url('images/munch.jpg') no-repeat top left;
transition:width 2s, height 2s;
}
#trans04:hover
{
width:225px;
height:284px;
}
</style>
<div id="trans04"></div>
Source:
<style>
#trans05
{
width:225px;
height:284px;
border: #000 solid 1px;
background: url('images/mona.jpg');
transition:background 2s;
}
#trans05:hover
{
width:225px;
height:284px;
background: url('images/munch.jpg');
}
</style>
<div id="trans05"></div>
Source:
<style>
#trans06
{
margin: 10px auto 0 auto;
width: 300px;
color: #000;
transition:margin 5s;
}
#trans06:hover
{
margin: 600px auto 0 auto;
}
</style>
<div id="trans06">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
Web page:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Source:
<style>
#trans07
{
width:125px;
height:125px;
background:#def;
padding: 20px;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s;
/* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s;
/* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s;
/* Opera */
}
#trans07:hover
{
width:125px;
height:125px;
transform:rotate(180deg);
-moz-transform:rotate(180deg);
/* Firefox 4 */
-webkit-transform:rotate(180deg);
/* Safari and Chrome */
-o-transform:rotate(180deg);
/* Opera */
}
</style>
<div id="trans07">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.</div>
Web page:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.