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 >
Re-Vision.com

projects:
Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
US
Along the Mississippi River
The Work of Antoni Gaudí
Graffiti

places:
Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

archive:
Graphics, sounds, and other ancient
items from the dawn of the Web.

FWIW:
Biography

©
Jay Boersma