HTML and CSS Reference
In-Depth Information
BRINGING
ANIMATION
TO
CSS
Combined, the following four specs provide you with several possibilities for creat-
ing more responsive interfaces, animated effects, and presentational enhancements,
which previously were only available through JavaScript:
CSS Transforms ( www.w3.org/TR/css3-2d-transforms and www.w3.org/
TR/css3-3d-transforms). These two specifications define mechanisms for
transforming the size, position, and shape of elements in two and three
dimensions, and are in the process of being superseded by a single updated
spec; see http://dev.w3.org/csswg/css3-transforms.
CSS Transitions ( www.w3.org/TR/css3-transitions). Transitions give
you a way to smoothly animate changes in state, such as a change in link
color. Transitioning changes in Transform properties is also very effective
in many circumstances.
CSS Animations ( www.w3.org/TR/css3-animations). CSS Animations are
similar to Transitions but don't rely on state changes. Instead, you define dif-
ferent property values inside @keyframes blocks that relate to different stages
of an animation (e.g., color: red at the start of the animation; c olor: blue
at the end of it). You then apply these animations to any element you want;
the browser then applies the starting property values to the element and
smoothly cycles them through to the end property values (so color: red at
the beginning smoothly animates to color: blue at the end).
Support for all four specs is good across modern browsers. In any case, for non-
supporting browsers it is simple to provide alternative styling using the Modernizr
library, which you'll learn about in detail later in the “Providing Alternatives with
Modernizr” section.
So let's explore these interesting new features. You should experiment and have
fun with these features but also use them responsibly. You don't want every new
website to turn into a crazy animated nightmare!
NOTE: The appearance of animations/transitions inside CSS has led a number of web developers
to complain about CSS-based animations breaking the “separation of structure, presenta-
tion, and behavior layers” best practice. And they are technically right. However, you can
spout all the religious arguments you want about animation belonging in the behavior layer
rather than the presentation layer, but animation definitely falls in the realm of design.
 
 
 
Search WWH ::




Custom Search