HTML and CSS Reference
In-Depth Information
I think you'll agree that this technique is much easier on the fingers. Obviously, you'll still need to define what
“glow” is, using keyframes to animate the square element. Also, keep in mind that we are using all the necessary
vendor prefixes to allow this effect to run across browsers. This may reduce depending on the needs of your campaign
and what your target audience's browsers are.
■
including all of your animation keyframe definitions on a separate style sheet would be a good idea. that way,
it won't clutter up your main style sheet and keeps style separated from core layout.
Note
As for the animation properties, the direction takes two different values, normal and alternate. The timing
function takes several different values of, ease, ease-out, ease-in, ease-in-out, linear, and cubic Bézier (x1, y1, x2, y2),
which allows for custom timing functions (a very good web tool to use when using cubic Bézier is
http://
cubic-bezier.com
). The fill mode's values are forwards, backwards, both, or none. Delay is the offset of time before
the animation begins and in the example above it would begin 2 seconds after the DOM loads. Finally, the play state
property determines whether the animation is either running or paused, which is useful for detecting if an animation
is running or not via JavaScript. Using all of these properties to your advantage, you'll be able to create a very
believable and realistic animation that you may remember from using Flash in your advertisements.
■
the shorthand order of properties doesn't matter except when using both duration and delay, they need to be
in the order, first duration than delay.
Note
Now that the basics of CSS-based animations are covered, let's take a look at working with the
@keyframes
rule
within CSS and putting these new properties to use. As shown above, our first example involved percent. Listing 5-2
uses the words
from
and
to
declare our keyframing events.
Listing 5-2.
CSS3 Keyframe Example
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#square {
width:100px;
height:100px;
background:black;
-webkit-animation:spin 5s; /* Safari and Chrome */
-moz-animation:spin 5s; /* Firefox */
-ms-animation:spin 5s; /* IE */
-o-animation:spin 5s; /* Opera */
animation:spin 5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
