|Learning CSS3 Animations & Transitions|
Author: Alexis Goldstein
If you have missed the revolution in CSS that is CSS3 you might well not believe the title of this book. The truth of the matter is that while the world has been concentrating on HTML5 it is actually CSS that has been undergoing the bigger development. While HTML5 is about semantic markup which really doesn't do much CSS3 is all about displaying that markup in creative ways - and yes this includes animation.
Chapter 1 gives an overview of where we are and what tools can help with the task of creating advanced CSS. This is where the problem of vendor prefixes first arises but overall the book does quite well in making the problem seem small. It also outlines which browsers support what new features - of course this will go out of date very quickly but it gives you an idea of which browsers are keeping up.
Chapter 2 looks at a more basic CSS facility which you might want to call general graphics. Using just divs you can use the style to create circles and lines at any angle. The trick is mainly to use the new transform to change the angle or a rectangular div or a div styled to look like a ellipse. If you think that general graphics using nothing but CSS is an unlikely proposition then just look at the example - a drawing of a bicycle.
Chapters 3 and 4 explain the real core of animation technique using CSS. Chapter 3 deals with using transitions for simple animation and chapter 4 deals with the more sophisticated keyframe animation. There are good examples of both in the chapters - spinning the bike wheels, a recoiling spring and a floating balloon. After reading these two chapters you should have a clear idea of how you might use CSS animation and if the book stopped at this point you wouldn't feel cheated. But there is more.
Chapter 5 explains the very popular 3D effect created using parallax scrolling - basically a set of layers that scroll at different speeds so giving the impression of being at different distances. The first example is of a simple three layer effect. Next we have some real scenes including a one with a walking robot.
The 3D theme continues with a look at the CSS3 3D transform. The first example is nice and simple - a 3D cube. Form here we move on to look at an example of drawing a house of cards.
Most of the rest of the book is on specific applications. Chapter 7 describes how to animate 2D and 3D transforms, chapter 8 is about text animation, chapter 9 is on creating flash style animations and chapters 10 and 11 are on animating and creating interactive infographics.
If you want to know about CSS3 and how to use it to replace the sort of things you would have used Flash for then this is highly recommended.
|Last Updated ( Thursday, 31 January 2013 )|