Opóźnienie animacji CSS nie działa

Question

Próbujesz zniknąć w jednym dziale .... i 7 sekund później, znika inny div. Nie mogę, dla mojego życia, dowiedzieć się, dlaczego to nie działa. Same animacje działają (animacje fadein/fadeout), ale potrzebuję "go" div, aby zaniknąć po określonej liczbie sekund. Ktoś wie, jak to zrobić poprawnie?

.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; 

} 

Dziękuję. Skrzypce jest tutaj:

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

Answer 1

Użyj poniższego dla swojej klasy .going. Opcja forwards we właściwości animacji sprawi, że blok nie wróci do opacity:0 (niewidoczny) po wykonaniu ostatniej klatki kluczowej.

#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; 
} 

Powyższe informacje są przydatne do wykonania opóźnienia animacji.

Fiddle Demo

Answer 2

Problemem było zarówno z rzędu i konkretnych nazw brakującym Przeglądarka:

Jakiekolwiek szczególne właściwości muszą być określone po bardziej ogólnej linii w przeciwnym razie zostaną one zamienione na nowe.

Miałeś też brakuje wstępną opacity: 0 na div dzieje (to rozpoczynało widoczny)

Working fiddle

Zaktualizowano forwards dzięki @Harry & @ VikasGhodke za wskazanie, że obecnie

#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; 
} 

Można uniknąć całego określonego stylu, zastępując skrótowy opis ustawień, dodając opóźnienie animacji do skróconej składni w następujący sposób:

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

masz ponad jazda na opóźnienia, jak tylko ustawić go .. więc określić opóźnienie po animacja .. ale jeden problem powstać .going pokaże się pierwszy wtedy po zwłoki to znika, a następnie pojawia się, co nie jest dobrą praktyką ..

Sprawdź tę 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; 
} 

Inną opcją jest bawić funkcje taktowania i synchronizacji ..

Sprawdź tę 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 */ 
}