Lesson Outline

Animating with CSS

Over the next few lessons, we will be covering various methods for creating animations in your applications. When used correctly, animations can do a great deal to make your application look more polished and make it more useable. As well as looking cool, animations are best used in applications when they serve a purpose. Animations are great for conveying a range of concepts (direction, anticipation, emotions) and one particularly useful feature of animations is that they draw the attention of the user. Our eyes are naturally drawn to movement, and so animations are a great way to direct a users' attention. We could use animations to enforce in the user's mind that a particular action was successful, or that the application is currently waiting for something, or perhaps to help illustrate a particular concept.

When done well, animations can be the little extra touch that makes your application a pleasure to use. When done poorly, animations can detract from the user experience and negatively impact performance - so it's important not to go overboard or add animations just for the sake of it. For some more context here, I will again recommend you check out the case study I did with Cory McArthur and Sworkit/OneGoal which has a section dedicated to animations and UX: Sworkit/OneGoal Animations.

As are most other things we have discussed throughout this module, animation is a huge topic in its own right. If you would like to dive much more deeply into animations, I have written an entire book on building Ionic animations and interactions that you might like to check out: Advanced Animations & Interactions with Ionic. This book contains hundreds of pages of information on animations, but we are still going to try to cover some important points about animation and UI/UX over the next few lessons.

In this lesson, we will be focusing on animating with just CSS. We are going to focus on CSS keyframe animations, but keep in mind that you can also often achieve nice animations simply by applying the transition property to animate CSS property changes. Since we will be looking at a few different methods for animating over the coming lessons, here is a brief overview of the pros and cons of the CSS keyframe approach:

Pros:

• Easy to create
• Performant (as long as you are animating friendly properties)
• SASS can be used to create more complex animations

Cons:

• Hard to integrate with application logic

Performance Friendly CSS Properties

It is very important to know that when it comes to animation performance, not all CSS properties are made equally. We cover this in-depth in the High Performance Applications in Ionic module, and I would recommend reading that at some point to gain a better understanding of animation performance, but I will briefly recap which properties are safe to animate and which you should avoid wherever possible.