Hello! I'm a Birmingham-based freelance web developer & designer. I build beautiful, bespoke responsive websites for businesses and organisations all over the world.

Creating CSS Animations With animation-delay

The CSS animation-delay property is obviously used to delay the commencement of a CSS animation for a specified amount of time. But, like many CSS properties, there’s more than meets the eye… Using animation-delay you can create a variety of complex and beautiful pure CSS animations with ease, by applying it to a set of otherwise identical elements at varying time values.

All of the following examples follow the same basic setup: a number of looping animated elements are created, all of which are identical save for a unique numeric class which allows each element to be selected individually via CSS. Using this, a different animation-delay time can applied to each element, causing each animation to run asynchronously with the others to create various effects. I’ll go into more detail in the examples, below.

continue reading…