Welcome
“Tell me and I forget. Teach me and I remember. Involve me and I learn.” Benjamin Franklin
Welcome to CSS Animation 101, and thank you for choosing this book.
I’m delighted you’ve chosen to learn CSS animation. This book is a light and fun introduction to the topic, and I hope you find it helpful. We’re going to learn about CSS transitions and animations. By the end you’ll have a good understanding of CSS animations as well as the tools to create and experiment with our own.
There will be both theory and practical examples. We’ll learn how to easily create your own working environment, and look at lots of examples of animation along the way.
Hello, I’m Donovan
Donovan Hutchinson
I’ve been writing articles about CSS and other topics for the best part of a decade. I’ve also been designing and developing websites since the late 90’s. More recently, I’ve written for Smashing Magazine, Net Magazine, Tuts+, Adobe Inspire and more. I post random stuff at Hop.ie, and this year I’ve been writing tutorials on CSSAnimation.rocks, all about advanced and useful animations in the browser.
During my days I work as a designer and front-end developer, and I’m a big fan of combining UX principles with fun animations in design. In the evenings I write blogs and try to make sure I’m aware of what’s happening in the world of web design.
This book is an introduction to the topic of CSS animation, but along the way we’ll cover a lot of material. The goal is to make sure we understand what the transition and animation properties are for, how they work, and see them in action.
By the end of this book you should be confident enough to begin applying animation to your projects.
Book structure
Here’s what we’re going to cover.
First: What’s animation anyway? This week we’ll look at why we animate. We’ll also introduce the transition and animation properties and some sources of inspiration.
Then: All about the transition property. We’ll learn how transitions work, and the properties we can control to change the movement.
After that: We’ll take on the animation property, and learn how to create keyframes that go beyond simple transitions.
Lastly: Bringing it all together. We’ll put together some advanced examples that make use of both, look into how we can make sure our work is accessible, and share some helpful CSS resources we can apply to projects, and JavaScript tools we can use for more advanced effects.
Help and support
I love to hear from you with your questions and thoughts. Feel free to drop me an email at donovan@cssanimation.rocks, or tweet me at [@donovanh](https://twitter.com/donovanh) at any time.
Need to brush up on your CSS?
If you’re new to CSS, it might be worth taking time to get familiar with the concepts. You don’t need to be an expert in CSS. If you know what a property is, you’ll be fine.
Some online tools and resources you might find helpful:
Homework
You’ll notice each chapter ends with a little homework section. This is entirely up to you but if you like you can use this to help with your learning. Each homework section will have a suggestion for something to try or think about. Give it a little time and you’ll find your understanding of CSS animation will be even better.
Ready? Let’s learn all about CSS animation!