| Learning CSS3 Animations & Transitions |
|
Author: Alexis Goldstein CSS Animation? Surely not! That's for JavaScript and similar. CSS is just about what things look like - isn't it?
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. CSS3 allows you to do things in static markup that would, until recently required code and probably Flash. You could say that the actual aim of CSS3 is to make a HTML5/CSS/JavaScript based web page as powerful as a Flash based page. 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.
Overall the approach to explaining CSS3 is good - a nice simple example illustrates the basic ideas and then some more realistic examples show you what the techniques could be used for. This works well with CSS because the basic ideas are fairly simple - its the "what can I do with this" that is difficult. The writing style is clear, easy to read and with no distractions - it just gets on with telling you how to. There is some JavaScript used but the book is suitable for a non-programmer. 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 ) |
