CSS animation delay not working

Question

An attempt to disappear in one div .... and after 7 seconds another div will disappear. I cannot, in my life, understand why it does not work. The animations themselves work (fadein / fadeout animation), but I need the “going” div to disappear after a given number of seconds. Does anyone know how to do this correctly?

.coming{ width:320px; height:auto; position:absolute; top:0px; left:0px; margin-left:10px; background:#FFF; color:#000; font-family: Sans-Serif; font-size:24px; border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 0px #000; -webkit-box-shadow: 0px 0px 0px #000; box-shadow: 1px 1px 5px #222; padding:2px 20px; } #people .coming{ -moz-animation: fadein 3s ease-in; /* Firefox */ -webkit-animation: fadein 3s ease-in; /* Safari and Chrome */ -o-animation: fadein 3s ease-in; /* Opera */ animation: fadein 3s ease-in; } .going{ width:320px; height:auto; position:absolute; top:120px; left:0px; margin-left:10px; background:#FFF; color:#000; font-family: Sans-Serif; font-size:24px; border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 0px #000; -webkit-box-shadow: 0px 0px 0px #000; box-shadow: 1px 1px 5px #222; padding:2px 20px; } #people .going{ animation-delay: 7s; -moz-animation: fadein 3s ease-in; /* Firefox */ -webkit-animation: fadein 3s ease-in; /* Safari and Chrome */ -o-animation: fadein 3s ease-in; /* Opera */ animation: fadein 3s ease-in; } 

Thanks. The violin is here:

http://jsfiddle.net/yZ4va/1/

Answer 1

Use below for your .going class. forwards in the animation property will ensure that after the last frame the block does not return to opacity:0 (invisible).

 #people .going{ opacity: 0; -moz-animation: fadein 3s ease-in 7s forwards; /* Firefox */ -webkit-animation: fadein 3s ease-in 7s forwards; /* Safari and Chrome */ -o-animation: fadein 3s ease-in 7s forwards; /* Opera */ animation: fadein 3s ease-in 7s forwards; } 

Above is a quick guide to delay animation.

Screenshot

Answer 2

The problem was related to both the order and missing names of a specific browser:

Any specific properties must be specified after a more general line, otherwise they will be overridden.

You also lacked the initial opacity: 0 in the current div (it started visible)

Working violin

Updated with forwards thanks to @Harry and @VikasGhodke for pointing out that

 #people .going{ -moz-animation: fadein 3s ease-in forwards; /* Firefox */ -webkit-animation: fadein 3s ease-in forwards; /* Safari and Chrome */ -o-animation: fadein 3s ease-in forwards; /* Opera */ animation: fadein 3s ease-in forwards; -moz-animation-delay: 7s; -webkit-animation-delay: 7s; -o-animation-delay: 7s; animation-delay: 7s; } 

You can avoid the whole concrete style overwriting the problem with the reduced settings by including animation delay in the reduced syntax like this:

Fiddle

 #people .going{ -moz-animation: fadein 3s ease-in 7s forwards; /* Firefox */ -webkit-animation: fadein 3s ease-in 7s forwards; /* Safari and Chrome */ -o-animation: fadein 3s ease-in 7s forwards; /* Opera */ animation: fadein 3s ease-in 7s forwards; } 

Answer 3

You ended the trip with a delay as soon as you set it .. so indicate your delay after the animation .. but then there is another problem. After that, you will start going out first, and then after the delay it will disappear, and then it will appear, which is not a good practice.

check fiddle

 #people .going{ -moz-animation: fadein 3s ease-in; /* Firefox */ -webkit-animation: fadein 3s ease-in; /* Safari and Chrome */ -o-animation: fadein 3s ease-in; /* Opera */ animation: fadein 3s ease-in; -webkit-animation-delay: 7s; animation-delay: 7s; } 

Another option is to use the synchronization and synchronization functions.

check fiddle

 .coming{ -moz-animation: fadein 3s ease-in; /* Firefox */ -webkit-animation: fadein 3s ease-in; /* Safari and Chrome */ -o-animation: fadein 3s ease-in; /* Opera */ animation: fadein 3s ease-in; } .going{ animation: fadein 10s ease-in-out; -moz-animation: fadein 10s ease-in-out; /* Firefox */ -webkit-animation: fadein 10s ease-in-out; /* Safari and Chrome */ -o-animation: fadein 10s ease-in-out; /* Opera */ }