Search code examples
cssinternet-explorerfirefoxanimationdelay

CSS animation delay behaves differently in Chrome than in IE/Firefox

I'm having some issues when using a delay with CSS animation.

My desired effect in the example:

The red box starts transparent waits 1 second, then fades in.

This happens in Chrome.

However, the behaviour in IE and Firefox is different:

The box starts visible, waits 1 second, then disappears and fades back in.

Which behaviour is correct? It seems to me that if you're going to delay an animation, it makes sense to wait at the first frame of the animation, not the last frame.

Is there a workaround without Javascript?

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;	
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;	
	}
}

.box {
    height: 200px;
    width: 200px;
    background: red;
    
    -webkit-animation: fadeIn 1s 1s;
    animation: fadeIn 1s 1s;
}
<div class="box"></div>

Solution

  • You could use animation-fill-mode to determine how to 'fill' your animation when it ends. You can revert it to before, after, initial, etc... Its not the most intuitive naming convention, but it does allow you to set your animation to start with opacity : 0; and then retain the computed value you want after the animation using animation-fill-mode: forwards;.

    MDN has a good explanation for it: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode