Let’s talk about | CSS animations
Reading time: 4 min
CSS animations, GIFs or rather Javascript animations? There are many ways to create web animations. In his guest post, our frontend developer Uwe Reiss goes into detail about CSS animations, what CSS animations are available, where they make the most sense, and how they are best used.
CSS animations are the foundation of any good web design
Good web design is not just the implementation of the designer’s static template. The behavior of the page during user interactions is also part of this. CSS animations can help to round off the overall picture and enhance web pages in a targeted manner. Compared to Javascript animations CSS animations are easy and fast to use, more performant and meanwhile offer some possibilities. As with everything, however, it depends on the right dose! But one after the other.
What are the CSS animations?
There are three different ways to animate your web design in CSS: Transitions, Animation and Offset.
Transitions are already used more often and provide animated transitions between two values. They are triggered by a user action such as hovering over a button, providing a smooth transition to the changed state. Thus, a color change would not take place abruptly, but by means of a fade.
The CSS property “Animation” goes a bit further, working with multiple keyframes to display more complex animations. This means that there is now not only a start and end point, but intermediate steps can also be incorporated. Also, among other things, it is possible to set the number of repetitions and not only the animation duration and start delay. Animations start automatically after the page load without user interaction and can be used for animated headers, for example. In addition, individual areas of an SVG graphic can also be animated. Animations can also be combined with Javascript to avoid premature animation of page elements that appear only after scrolling out of view.
Finally, there is the possibility of using Offset , which can be used to move objects along a path. These can be basic geometric shapes or even a custom path. Let’s take a motorsport website as an example: Here, a race track could be constructed with cars driving at different speeds and accelerations on the race track.
Where do CSS animations make sense?
Basically, smaller animations can be usefully integrated on any website, as there are areas that can always be easily animated to optimize the user experience (UX). These include:
Buttons: There are several options here, such as a slight transition of the button background. This basic animation always goes! You could also enlarge the button a bit or have it move out with text for sticky elements on the side. In any case, buttons should always change and interact with the user when hovered.
Sticky Header: If you want a header to be sticky, be careful not to waste too much space and make it smaller when scrolling. This can be done very gently, so that the user doesn’t even notice it. When scrolling back, the header can then be shown again more quickly, so that it has the correct distance directly to the beginning of the content.
Dropdown menus: For dropdown menus, you should use a small fade-in animation to improve the user experience. Here it is important to note that the animations should in no case be too complex or slow.
Accordion elements: Accordion elements behave similarly to dropdown menus. These interactive elements should also be lightly animated and not simply pop up abruptly. This increases the clarity, as the connection to the title and the appearing content is made clear.
Special cases: Special cases are for example Areas that you want to highlight with an eye-catcher. These should be used sensibly, sparingly, and no more than once per page, otherwise it will be too much. The motto here is: less is more. This can be, for example, an animated graphic like in this codepen example:
In extreme or special cases, a more elaborate or playful animation, such as the points chase, could also be used, which can be expanded to a car race track with appropriate images and graphics (background image of a race track, cars instead of points), as mentioned in the example Offset Animtionen above.
Browser compatibility
Transition: full browser support
Animate: full browser support
Offset: no support for Firefox for Android. For Edge only from version 79 (2020), Firefox for desktop from 72 (2020) and Safari for Mac & iOS from 16 (mid 2022).
Conclusion
As already mentioned, you should never overdo it with CSS animations, otherwise the professional web appearance will quickly be gone and the seriousness will fizzle out. The art of good web design is to find just the right dose – and it’s usually quite small and unobtrusive. The animations should not be distracting, but supportive and make the website a bit “softer”. They represent the last little touch and are hardly present. Of course, it also depends somewhat on the industry. Depending on the time, it can of course be a little more. If, for example, a certain diagram is to be clarified, more elaborate animations are also possible here. As a rule, the animation duration should be kept rather short so that the website appears fast and not delayed and the effect does not distract too much or for too long. Because one thing is clear: the days of the 90s with playful GIFs, 3-D effects and Flash animations are long gone. Now we are in the era of targeted, user experience supported animations, finely dosed for the perfect web presence.
Want to put the finishing touches on your website with CSS animations? Our experts are looking forward to working with you!
