[Fixed] Animation Delay not working CSS

This article will go through a few reasons why when using CSS animations and using the

animation-delay property is not working. To give an overview of what we are trying to achieve,

when we want to delay a CSS animation, we can use the animation-delay CSS property to

give a few seconds delay. For example, when the user hovers on a button, we can add a 5 second delay to

the animation.

Basic Example Usage

A very basic example for animation delay to rotate a DIV element is as follows:

<div class="box">Hello
</div>

Now in the CSS we specify keyframes and the animation delay to be 2 seconds with a duration of 0.7 seconds

.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-delay: 2s;
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Possible issue #1 - using overlapping animation properties

animation-delay CSS property specifies the delay time when an animation is applied to an element. The most common reason I found this not working is

when used in conjunction with another animation CSS property. The animation property has the following format:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Lets say we have the following CSS, we define the animation delay and then the animation as follows:

animation-delay:15s;
animation:fade-in 5s;

We can see that there is no animation delay. This is because we defined the animation-delay CSS property before the animation CSS property.

The animation property will override the definition of the first one and causing the delay to be 0 seconds. It would be best practice to specifically

type out our animation properties instead of using shorthand to catch mistakes such as the above. So we can replace it with the following:

animation-name:fade-in;
animation-duration: 5s;
animation-delay:15s;

Possible issue #2 - you are not using the correct values

The animation delay property will accept a value in terms of the timeoffset. This is the time that

the specified animation is applied to the specific element. The value can be either seconds (s) or milliseconds (ms).

Some examples of how you can declare the animation-delay property are as follows.

animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;

Now if you dont use the correct values, then your delay will not start. Having a positive value tells the browser

to animate the element after a specific has passed from which the animation was applied. A zero value will tell to

animate immediately when the animation is applied.

A negagive value means that the animation should be applied immediately to the element, but should progress further along

the timeline. For example if the animation duration of an element is 2s and we have the animation-delay of -1500ms,

then that means the animation will start immediately, but will skip to the 1500ms point in the animation timeline.

So be careful when you set your negative animation delay. If the negative value of the animation delay is larger than the

animation-duration, then you will not see your animation correctly.

Possible issue #3 - not using the correct vendor prefix and existing bugs

CSS vendor prefixes are browser specific CSS prefixes before a CSS property to allow browsers to support new

and upcoming CSS functionality. We have the following set of prefixes for each browser type:

• -webkit- (Chrome, Safari, iOS, Android)
• -moz- (Firefox)
• -ms- (IE)
• -o- (Opera)

To use the prefixes, we add the above to our CSS as follows:

-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;

So when you are using the animation-delay CSS property at least add the following prefixes so that the browser

can recognise them. As an example, without the -moz- prefix, specific version of firefox, the animation delay will

not work for the user.

At the time of writing the animation-delay CSS property should be available for the most recent versions of all browsers.

Additionally keep in mind of browser bugs when using the animation property:

• IE10 and IE11 will not fire Animation events for pseudo element animations. (According to the specification, animation-delay should work for all elements and pseudo elements)

• iOS 6.1 and below do not support animation on pseudo-elements. iOS 7 and higher are reported to have buggy behavior with animating pseudo-elements.

• IE10 and IE11 do not support CSS keyframe blocks inside media queries. Must be defined outside of media query definitions.

Final thoughts

Animation delay (animation-delay) CSS property can be a great way to give delays to your CSS

animations. The basic steps to creating a animation delay is:

• Setup the @keyframe CSS

• In the element to add your animation, place the animation-delay property

When using this property there are a few gotchas that you have to consider.

• making sure that this value is not being overwritten by the animation shorthand CSS property

• use the correct values when defining the animation-delay. The property will only accept seconds (s) and milliseconds(ms). It will also accept negative and positive values. Positive values will delay the animation after it has been applied, negative values will apply the animation directly but skip the timeline.

• make sure to check the vendor prefix and existing bugs. As examples, IE10 and IE11 does not support keyframes correctly and does not fire animation events on pseudo elements.