Welcome

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.

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.

By the end of this book you should be confident enough to begin applying animation to your projects.

Here’s what we’re going to cover.

First: What’s animation anyway? We’ll look at why we animate. We’ll also introduce the and 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.

I love to hear from you with your questions and thoughts. Feel free to drop me an email at , or tweet me at @donovanh at any time.

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:

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!