16 top CSS animation examples

09. Colourful transitions

Click to see the CSS animation in action

Click to see the CSS animation in action

The Da-Ink website uses a really effective technique to transition between pages. The transition is simple and consists of an SVG containing a number of different-sized rectangles of different colours positioned on top of one another. 

The animation consists of transforming the X position by the width of the SVG. Then, using nth-of-type, we apply delays, offsetting each by 75ms from the last to create a smooth transition.

10. Pulsing circles

Click to see the CSS animation in action

Click to see the CSS animation in action

The pulse animation used on the Peek-a-Beat website is simple yet effective and not difficult to reproduce – consisting of three circles inside an SVG in which we animate their scale and opacity. 

11. Expanding highlight

Click to see the animation in action

Click to see the animation in action

This is a very simple, yet really effective technique. The transition is accomplished using the ::before pseudo element. To begin with, the pseudo element is placed at the bottom while spanning the full width, but only a few pixels in height. 

When the element is interacted with, the width and height of the pseudo element are both transitioned to 105% of the parent’s size (the change is much more dramatic vertically), as well as transitioning the colour of the text. 

12. Elevated title

Click to see the CSS animation in action

Click to see the CSS animation in action

Ensemble Correspondances uses simple animation to convey movement in music. The design loosely represents sheet music. 

13. Spinning menu icon

Click to see the animation in action

Click to see the animation in action

The animated menu button is created using an SVG. The animation occurs when the user interacts with the menu button. Two transitions take place: the circular group around the menu spins 360 degrees and the menu icon in the centre changes colour. 

The most complicated part is the timing-function. Utilising cubic-bezier to gain complete control, we’re able to start the animation slowly, race through the middle part and slow it down again at the end.

14. Underline from the centre

Click to see the animation in action

Click to see the animation in action

The animation consists of positioning the ::after pseudo element to the bottom and then scaling it when the button is interacted with.

15. Expanding corners

Click to see the animation in action

Click to see the animation in action

The Princess Alexandra Auditorium website has a visual way to show the categories of its shows. Each of the show cards has a triangular corner set in a colour which represents the category and then, on hover, the name of the category is displayed. 

The effect is accomplished using the ::before and ::after pseudo elements, transitioning the size of the triangle and fading the name in when the element is interacted with.

16. Sliding arrow

Click to see the animation in action

Click to see the animation in action

The Greenwich Library has a really interesting transition on its buttons. When interacting with the button, two things happen: the text part of the button is covered and the arrow is then animated off the right-hand side of the button and back in from the left. 

The colour transition is accomplished with the transition property and the arrow using a simple keyframe animation. Both the transition and the animation use the same duration in order to synchronise the movements.

This article originally appeared in issue 268 of Web Designer, the creative web design magazine – offering expert tutorials, cutting-edge trends and free resources. Buy issue 268 here or Subscribe to Web Designer here.

Read more: