Re-vision - Photography and Graphics by J. Boersma - Webwork HTML Tutorial - CSS3 Transitions

Webwork

/

CSS3 Transitions

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>

Web page:

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>

Web page:

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>

Web page:

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>

Web page:

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>

Web page:

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.

< Previous Webwork Table of Contents Next >