As a motion enthusiast, there is one question that I have been asked the most:

“How do I start with Motion Design?”

To this, I often reply savagely, “You start with Physics”; scaring away most of the seekers 😂 But here is the thing — someone who is genuinely interested never stops with a single query. They follow up with questions after questions after questions. I love them! ❤️

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.

The first thing to look at is the timing function. In the above example, we’re using a linear timing function, which means that the box is constantly moving at the same speed. In some cases, this is desirable; however, in the real world, motion usually doesn’t work like that.

I just want to collect all the main principles & rules in one place, so that other designers who want to start animating interfaces don’t have to search for additional information.

Practical suggestions to improve your UI micro-interactions.
Let’s see some examples of UI animations going from good to great. With a little bit of tweaking here and there, you can elevate your UI patterns with animation.

Humans can’t endure boredom for a long time, which is why products that are built for non-exciting, repetitive tasks so often get abandoned and gather dust on computers and phones. But boredom, according to psychologists, is merely lack of stimulation, the unfulfilled desire for satisfying activity. So what if we use the interface to give them that stimulation?

• Gameification
• Humor
• Animation
• Art

What if I told you there was an image format like GIF, but it worked with vectors? What if I said it was possible to reverse the direction of its animation? What if you could take one base image and animate different parts of it separately, at different speeds? Well, the image format, SVG, already exists. It just needs a little gentle encouragement.

So I became a bit obsessed about how further we can push the limits of what we can draw with CSS only. Basically, I noticed that you can play around with basic shapes like circles, rectangles and triangles to draw virtually anything. You can even put some drop-shadows and CSS filters to get some pretty cool effects as well.

In this pocket guide I'll write some examples from really easy to more complex things you can do to create cool drawings and animations with CSS.

When we released Lottie six months ago, we never imagined it would be embraced by the community as it has been. It is inspiring to hear from people in person, through emails, on Twitter, and on GitHub about how happy they are to have an animation solution for their apps. We’ve read articles written by designers and engineers whom we respect — such as Nick Butcher, Valentina Berois, Chris Basha, Christopher Deane, and many others — that tell us specifically how Lottie has allowed them to create animations more easily.

The jQuery plugin for hierarchical display animation effect

Hierarchical Timing is a meaningful transition introduced in Google Material Design that focuses your users attention in an app or how an app element got from point A to point B.

Digital experiences are emulating real life more and more every day. This may seem counterintuitive, considering the hate that rains down on skeuomorphic visual design, but there’s a lot more to emulating real life than aesthetics. Interface designers can emulate real-life physics and movement on a digital screen. This type of motion is becoming more common, which is why it’s becoming easier for people to understand computers. We’re not getting better, the interfaces are!

By Val Head

I hope you enjoy the book! All the example files can be found in the live example codepen collection. (Bookmark that so you can reference them as you read.)

Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.

As UX professionals, we play a key role in raising the bar for customer experiences. A simple attention to detail is often what signals to the customer that we’re thinking about them. In the digital space, we focus on user interactions within applications devices and processes.

So here are five bits of advice we can use to pull back from the edge of animation abuse. With these thoughts in mind, we can make 2015 the year web animation came into its own.

Learn some interesting animation techniques involving Sass and SVG filters for realistic motion effects on the example of animated animals.

Animating elements in your mobile applications is easy.

Animating elements in your mobile applications properly may be easy, too… if you follow our tips here.

While everyone is using CSS3 animations in mobile these days, many are not doing it properly. There are best practices to take into account that are constantly and considerably disregarded. This happens mainly because there are still people who don’t really understand the real reasons why those practices exist and are so vigorously endorsed.

Use velocity.js instead!