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:
.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>
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:
.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>
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:
[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:
.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>
Another example:
.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:
