It often happens that as a designer, you have planned a certain CSS animation for an element, but you can't precisely communicate how it should look in the end. Storyboards or animation software like Flash or After Effects can certainly help here – but wouldn't it be much simpler to just build the CSS animation yourself? That's exactly what we thought, which is why we held an internal CSS Animation Workshop.
Do it yourself!
It's so obvious, yet rarely practised: just do it yourself! CSS includes many elements familiar from, for example, After Effects, such as the ability to animate linearly or to regulate speed with various animation curves. However, CSS animations still fundamentally differ from other types of animation, making them particularly exciting.
CSS Transitions vs CSS Animations
Insight No. 1: There are two different ways to animate in CSS. CSS Transitions have a defined start and end state. They are executed as soon as a pseudo-class (:hover, :focus, :checked etc.) is triggered or removed. A transition cannot loop. CSS Animations, on the other hand, can have any number of keyframes. The time when a keyframe is executed is usually specified as a percentage. You can not only specify how long the animation lasts but also how often it should repeat.
Animation Properties
Insight No. 2: There are infinite possibilities when controlling an animation. For a transition, you must first specify which property it should be applied to. For transition-property, you can therefore either state the corresponding property or 'all' or 'none'. Some properties exist for both CSS Animations and CSS Transitions. These include: delay, duration, and the timing-function. As the name suggests, a delay refers to a time lag in the animation. If the delay is a positive value, the animation starts later; with a negative value, it starts earlier, meaning it is fast-forwarded, so to speak. The duration also speaks for itself and denotes the length of the animation. The timing-function opens up a wide scope regarding the temporal progression of the animation. The values 'ease', 'ease-in', 'ease-out', and 'ease-in-out' indicate whether the animation should start and/or end slowly. 'Linear' means that the timing remains constant. 'Inherit' is used when the timing-function should be inherited. However, the best control over the animation curve is achieved with the 'cubic-bezier(n,n,n,n)' variant. Here, all numerical values range from 0 to 1. Websites such as matthewlein.com or cubic-bezier.com offer ideal support for this.
For animations, there are many more properties that open up additional possibilities. These include 'animation-name'. This is the name of the @keyframes you want to bind to the selector. 'Animation-iteration-count' states how often the animation is shown. 'Animation-direction' decides whether the animation plays forwards, backwards, or alternately, and 'animation-play-state' determines whether the animation is running or paused.
Pseudo-elements
Insight No. 3: Long live the pseudo-element! The pseudo-elements ::before and ::after play a particularly significant role in animations, as they allow, for example, a div element to contain two additional elements. However, it should be noted that for an element, a specific property can only be changed with a single animation. If, for instance, you want an element to blink irregularly at the beginning using opacity and then continuously and evenly blink indefinitely, the element must be wrapped in a parent element. Then, the embedded element can perform the initial opacity animation, and the parent element can display the second, infinite opacity animation with a delay.
Conclusion
I was pleasantly surprised that CSS animations can be implemented very intuitively. Due to the many variable properties, very precise and detailed results are possible, and there are no limits to one's imagination. That makes designers' eyes light up.
