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.
There are plenty of free tutorials online but very few get into the nitty-gritty details. This is why books can provide better resources for learning about more in-depth features of HTML5 canvas, CSS3, and JavaScript animation.
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.
And since most frontend developers already know CSS this is a safer book for a beginner than diving right into JavaScript/SVG animation.
If you’re looking for a fun and experimental animation book then look no further. Animation in HTML, CSS, and JavaScript is perfect for developers of all skill levels who want to master every aspect of web animation.
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.
You’ll learn how to build custom CSS3 carousels and how to manipulate the DOM with JavaScript. In later chapters you’ll also learn a bit about the canvas element and JS easing functions.
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.
This book is just as much of a technical book as it is a theory-based design book. Web Animation using JavaScript teaches how to write JavaScript that animates elements on a page. But it also covers best practices for web animation that you might not consider while coding.
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.
You start with basic JavaScript animations combined with CSS transforms. As you progress through the book you’ll get into open source JavaScript libraries for making custom animations from scratch.
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.
Earlier chapters explain the raw basics of SVGs and how to create graphics on the fly. But you’ll get to more complicated topics about SVG animation with JavaScript, filters, SVG masks, and building custom gradients/patterns in code.
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.
But anyone interested in JS-based chart animations will enjoy Interactive Data Visualization for the Web. This book published by O’Reilly and written by Scott Murray delves into the basics of JavaScript visualization with the open source D3.js library.
Before picking up this book you should already be comfortable writing basic JavaScript. It’s not intended for beginners and you might even want to study D3 a little before getting into this title. I actually organized a post on D3.js books if you’re looking for further resources.
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.
If you’re up for a challenge and really want to learn about interactive data with JavaScript then I’d highly recommend this book.
From web games to custom interactive profiles and dashboards, this book has it all. Supercharged JavaScript Graphics by Raffaele Cecco is a book in its own category teaching web graphics for a variety of mediums from desktop PCs to mobile phones.
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.
Later chapters share tips on web gaming with the HTML5 canvas element. JavaScript is a huge component of canvas animation and I’m thrilled to see so much attention paid to this subject. You’ll learn how to create custom vector graphics and animate them with JavaScript all from the comfort of your text editor.
If you already know a bit of JavaScript then you’re ready for this book. The examples are pristine and all of the source code is available for free on GitHub.
The exercises may seem a bit scattered but the true goal is to teach JavaScript graphics from all angles. And in that sense I’d say this book goes above and beyond expectations.
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.
In the second half of the book you’ll learn about canvas animations and interactive features. This is where knowledge of JavaScript comes into play, although you can learn as you go if you’re a quick study.
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.
Alex is a fullstack developer with years of experience working in digital agencies and as a freelancer. He writes about educational resources and tools for programmers building the future of the web.
