There’s no better time to jump into web animation than right now. Browser support is huge and modern libraries make it even easier to build custom animations from scratch.
If you’re looking for a nice place to start with web animation I’d recommend CSS Animations and Transitions for the Modern Web. This book only focuses on CSS animation, but it covers tips for full browser support and progressive enhancement.
This book is absolutely massive totaling just over 500 pages with dozens of examples. The book splits into two main parts: first it covers CSS animation then JS/canvas animation. You start by reading about the syntax and then follow specific practical examples in code.
I cannot think of a better book for teaching yourself everything about animation on the web. The writing style is super clear, the examples are pristine, and with 500+ pages you’re guaranteed to learn something new.
Modern CSS has come a long way and it’s now possible to build custom animation effects just with CSS3 properties. Transitions and Animations in CSS teaches how to build complex transitions and custom animations with raw CSS code.
This book is super cheap and it’s only 120 pages long. But for the price you get a lot of value and tons of exercises to shape your knowledge of CSS-based animation.
Early chapters cover the basics from Disney’s 12 animation principles and then slowly merge into CSS transition properties. This includes detailed info on which properties can handle transitions and how they work in modern browsers.
The last chapter takes up about 50% of the whole book. It teaches CSS animations with keyframes and specific browser hacks to get them working across all platforms.
Whether you get this as a pocket guide or a desk reference it’s easily the best book on CSS animations to date. And for a bargain-basement price tag it’s perfect for developers just breaking into CSS animation for the first time.
So many developers go overboard with custom page scrolling, lengthy animated transitions, and flashy(yet gaudy) page effects.
The author Julian Shapiro carefully teaches how animation can affect the user experience. This is one of the few books that melds development and motion graphics principles together.
If you want a practical introduction to web animation then I highly recommend this book. It’ll teach you how to animate and how to be prudent with your animations.
This is an incredibly detailed CSS animation book that goes beyond the basics of interface design. With CSS Animations and Transitions for the Modern Web you’ll learn about 2D and 3D animation effects and how they work.
In total the book spans 320 pages with 7 chapters + an appendix. The author Steven Bradley takes great care when discussing modern browsers and the technical side of accessibility design. You’ll learn about progressive enhancement to deliver experiences that work for everyone.
But in modern browsers you can even get into some wacky stuff like 3D transforms and polyfills for animations. Bradley covers each topic in great detail sharing live code snippets which can also be found on the publisher’s website.
The level of detail is exquisite and you’ll walk away with more than just CSS knowledge. You’ll learn about the basics of animation for interfaces giving consideration to timing, exaggeration, and blended effects.
This book is perfect for anyone who wants to take their CSS animation skills to the next level. If you’re a pro frontend developer or hoping to become one this book will be an invaluable resource.
I know this one is not strictly a CSS animation book. But it is perhaps the best CSS book published in the last few years and it covers a ton of animation techniques.
CSS Secrets by Lea Verou is my favorite CSS book currently sitting on my bookshelf. Lea shares just under 50 unique CSS hacks, tips, and techniques for the modern era. These branch into various topics like typography and custom CSS borders.
However many chapters are dedicated solely to CSS animations and transforms. The entire 3rd chapter is dedicated to creating shapes with CSS. These can be used for animation on the page or interface elements like tabbed widgets.
Regarding animation techniques you’ll learn about color transitions, tinting, custom easing, blending images, folded corners with shadows, animating along a path, and a lot more.
Some of these animation tips may seem pointless or unnecessarily detailed. But the beauty lies in how much can be done using CSS, and if you can master these techniques you’ll have a much easier time inventing your own CSS animation hacks.
Scalable Vector Graphics are not a new image format, but they are somewhat new to web designers. Browser support for SVG has risen dramatically and it’s now possible to render custom SVGs into your HTML code via XML(see this example).
The book SVG Essentials shares fundamental tips and insights into the world of SVG design on the web. Over 366 pages you’ll learn how SVGs are made and what you can do with them.
This book really is the perfect intro guide to SVGs for web design & development. I’d recommend it to anyone who already knows how to code HTML & CSS and wants to really master the concepts behind SVGs on the web.
SVG Animations is a followup book to SVG Essentials. This newer book goes into much more detail on the animation side of things.
The author Sarah Drasner contributes to CSS Tricks and has years of experience as a senior UX engineer.
Her book is one of the best web animation books available. It’s a very fun read but the lessons are also quite practical. You’ll walk away with much deeper knowledge of customizing SVGs based on line segments, points, colors and shapes.
A big focus in this book is optimization. Too many websites end up far too bloated and optimization is the key to fewer HTTP requests and a faster load time. Sarah focuses on SVG animation from an optimization standpoint teaching you how to write code that works and reduces bandwidth.
You’ll learn how to build animations for practical page elements like responsive nav menus and page icons. You’ll also learn how to test your animations and debug problems as they arise. Sarah also mentions backwards compatibility and offers tips for developers who want to forge ahead with SVG animation while still supporting older web browsers.
Not everyone has a reason to learn data visualization. It’s often tied into big data, analytics, or custom dashboards used for displaying realtime data.
However I don’t want to scare you off if your skills aren’t in the advanced level. Even with rudimentary HTML/JS knowledge you can learn from this book. Just bear in mind it does get technical showing how to render graphics with custom animations & user interactivity. The examples are high quality but may be tough for a beginner to follow.
Raffaele starts with an intro to DHTML sharing basic examples of DOM manipulation. From there you’ll delve into more advanced UI animations for image carousels, dropdown menus, and free libraries like jQuery UI.
In 320 pages you can go from a complete novice to an adept developer manipulating canvas elements to your pleasure. HTML5 Canvas: From Noob to Ninja teaches how to write canvas elements onto the page starting with the raw fundamentals.
If you know at least a little HTML then you’ll have no problems working through this book. Every chapter shares a new exercise in excruciating detail with commentary along the way.
The first half of the book talks about shapes and basic SVG properties like colors and line styles. You’ll learn how to draw shapes, images, text, and how to properly structure your code.
But my favorite thing about this book is its teaching style. You’ll learn about the HTML canvas element and won’t stray far from that topic. And since each exercise walks you through a step-by-step process you should have an easy time working through each lesson.
If you already know a bit about the canvas API then you know it’s extremely detailed. There’s so much we can do with HTML5 canvas elements and most developers have only scratched the surface.
If you want to go a bit deeper grab a copy of the HTML5 Canvas Cookbook. It covers almost 350 pages of custom recipes ranging in difficulty from beginner to advanced.
Some recipes teach how to draw basic shapes and manipulate them with animation. Others teach you how to create data charts, design simple web games, or even get into the WebGL library. This book is the ultimate collection of recipes and code snippets to help you learn and master canvas manipulation.
It also has a very detailed index so you can quickly look up techniques and jump around chapters with ease. This cookbook can be a learning guide for beginners and a desk reference for more advanced developers.
Take some time looking over this list and see if anything jumps out. Everyone studies at a different pace and works from different experience levels.
Also not everyone wants to learn about HTML5 canvas animation or D3.js animation. Yet some people want to learn absolutely everything about web animation!
Figure out exactly what you want to learn and do a bit of browsing. I guarantee there’s a web animation book out there tailored to your goals.