Webwork
/
CSS3 Animations

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.

Animations

A CSS animation is a CSS transition that, like most animations, is changed in stages over time. This is done using the CSS3 @keyframes Rule. Here's a simple example:

Source:
<style>

.demodiv
{
width:100px;
height:100px;
background:red;
-webkit-animation:anima01 20s; /* Chrome, Safari, Opera */
animation:anima01 20s; /* Standard syntax */
}

@-webkit-keyframes anima01 /* Chrome, Safari, Opera */ {
from {background:yellow;}
to {background:red;}
}

@keyframes anima01 /* Standard syntax */ {
from {background:yellow;}
to {background:red;}

}

</style>

<div class="demodiv"></div>
Web page:

In this example,
the object
<div class="demodiv">
is changing
from yellow
to red
over a
20s (20 second)
time frame.

Note that to achieve maximum browser compatibility it is necessary to use slightly different code for Chrome/Safari/Opera versus Internet Explorer/Firefox.




The @keyframes rule sets the duration of the animation. In the example above, the "keyframes" are represented by the words from and to. In this case:

from = 0% - or the starting point of the animation

to = 100% - or the ending point of the animation




Here's another example where actual percentages are used to describe the keyframes:

Source:
<style>

.black_circle01 {
width:100px;
height:100px;
border-radius:50px;
background:#000;
position:relative;
}

.black_circle02 {
width:100px;
height:100px;
border-radius:50px;
background:#000;
position:relative;

-webkit-animation:anim_demo01 1s; /* Chrome, Safari, Opera */
animation:anim_demo01 1s; /* Standard syntax */
}

@-webkit-keyframes anim_demo01 /* Chrome, Safari, Opera */ {
0% {left:0px; top:0px;}
25% {left:400px; top:0px;}
50% {left:400px; top:200px;}
75% {left:0px; top:200px;}
100% {left:0px; top:0px;}
}

@keyframes anim_demo01 /* Standard syntax */ {
0% {left:0px; top:0px;}
25% {left:400px; top:0px;}
50% {left:400px; top:200px;}
75% {left:0px; top:200px;}
100% {left:0px; top:0px;}
}

</style>

<script type="text/javascript">

function animate01(){
document.getElementById('black_circle').className ='black_circle02';
}
function animate02(){
document.getElementById('black_circle').className ='black_circle01';
}

</script>


<div class="black_circle01" id="black_circle"></div>
<a onMouseOver="animate01()" onMouseOut="animate02()" href="#">RUN</a>
Web page:
RUN

If you are accustomed to doing timeline animation (as in Flash), you can picture these percentages as the horizontal axis on which the animation is built:

timeline

[Note that the JavaScript included in the code above is there to create the RUN button.]




Here's another code bit which breaks the key frames down into finer divisions:

Source:
<style>

.black_circle03 {
width:100px;
height:100px;
border-radius:50px;
background:#000;
position:relative;
}

.black_circle04 {
width:100px;
height:100px;
border-radius:50px;
background:#000;
position:relative;

-webkit-animation:anim_demo02 2s; /* Chrome, Safari, Opera */
animation:anim_demo02 2s; /* Standard syntax */
}

@-webkit-keyframes anim_demo02 /* Chrome, Safari, Opera */ {
0% {left:0px; top:0px;}
15% {left:400px; top:200px; background:#f00;}
30% {left:0px; top:0px; background:#0f0;}
50% {left:0px; top:200px; background:#00f;}
70% {left:0px; top:0px; background:#ff0;}
80% {left:600px; top:0px; background:#0ff;}
100% {left:0px; top:0px; background:#000;}
}

@keyframes anim_demo02 /* Standard syntax */ {
0% {left:0px; top:0px;}
15% {left:400px; top:200px; background:#f00;}
30% {left:0px; top:0px; background:#0f0;}
50% {left:0px; top:200px; background:#00f;}
70% {left:0px; top:0px; background:#ff0;}
80% {left:600px; top:0px; background:#0ff;}
100% {left:0px; top:0px; background:#000;}
}

</style>

<script type="text/javascript">
function animate03(){
document.getElementById('black_circleA').className ='black_circle04';
}
function animate04(){
document.getElementById('black_circleA').className ='black_circle03';
}
</script>

<div class="black_circle03" id="black_circleA"></div>
<a onMouseOver="animate03()" onMouseOut="animate04()" href="javascript:void(0);">RUN</a>
Web page:
RUN



Another example:

Web page:
Source:
<style>

.black_circle05 {
width:106px;
height:106px;
border-radius:50px;
background: #ccc url('images/larry-thumb.jpg');
position:relative;
}

.black_circle06 {
width:106px;
height:106px;
border-radius:50px;
background: #ccc url('images/larry-thumb.jpg');
position:relative;

-webkit-animation:anim_demo03 2s infinite; /* Chrome, Safari, Opera */
animation:anim_demo03 2s infinite; /* Standard syntax */

}

@-webkit-keyframes anim_demo03 /* Chrome, Safari, Opera */ {
0% {left:0px; top:0px;}
17% {left:400px; top:0px; background: #ccc url('images/moe-thumb.jpg');}
32% {left:0px; top:0px; background: #ccc url('images/moe-thumb.jpg');}
47% {left:400px; top:0px; background: #ccc url('images/curly-thumb.jpg');}
62% {left:0px; top:0px; background: #ccc url('images/curly-thumb.jpg');}
77% {left:400px; top:0px; background: #ccc url('images/larry-thumb.jpg');}
100% {left:0px; top:0px; background: #ccc url('images/larry-thumb.jpg');}
}

@keyframes anim_demo03 /* Standard syntax */ {
0% {left:0px; top:0px;}
17% {left:400px; top:0px; background: #ccc url('images/moe-thumb.jpg');}
32% {left:0px; top:0px; background: #ccc url('images/moe-thumb.jpg');}
47% {left:400px; top:0px; background: #ccc url('images/curly-thumb.jpg');}
62% {left:0px; top:0px; background: #ccc url('images/curly-thumb.jpg');}
77% {left:400px; top:0px; background: #ccc url('images/larry-thumb.jpg');}
100% {left:0px; top:0px; background: #ccc url('images/larry-thumb.jpg');}
}

</style>

<script type="text/javascript">
function animate05(){
document.getElementById('black_circleB').className ='black_circle06';
}
function animate06(){
document.getElementById('black_circleB').className ='black_circle05';
}
</script>


<div class="black_circle05" id="black_circleB"></div>
<a onClick="animate05()" href="javascript:void(0);">RUN</a>
<a onClick="animate06()" href="javascript:void(0);">STOP</a>

To make HTML5/CSS3 animations easier to create for non-coders, several applications are available:

Hype 3 Professional (for Mac)

Adobe Edge Animate CC

Animatron

More...

< Previous     Webwork Table of Contents    
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