animation-delay nie działa

Question

Cześć, stworzyłem w css animację, która miałaby się pojawić z kilkusekundowym opóźnieniem, jednak animation-delay nie działa i animacja pojawia się od razu.

.box{
	z-index: 1;
	padding-left: 50px;
	animation: fadeIn ease 3s ;
    animation-delay: 12s;
	
   -webkit-animation: fadeIn ease  3s ;
   -moz-animation: fadeIn ease  3s;
   -o-animation: fadeIn ease 3s;
   -ms-animation: fadeIn ease  3s;
}

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

@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

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

@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

 

Answer 1

animacja się odtwarza po 12 sekundach, tylko, że początkowo (przez te 12 sekund) masz w .box domyślnie opacity ustawione na 1, 

w .box ustaw opacity: 0; i animacja będzie taka jak chcesz (czyli z delayem), ale będzie problem po niej, bo animacje w css nie zmieniają właściwości elementu, więc użyj javascript, żeby po animacji zmienić opacity na 1 :P

https://codepen.io/Tnifey/pen/yLVYbgY przykład jakbym ja to wykonał na Twoim miejscu :P

 

Comments

Bardzo dziękuję za pomoc, animacja wykonuje się poprawnie tylko element znika po kilku sekundach, nie wiem w czym błąd.

---

bo animacje w css nie zmieniają właściwości elementu

 przeczytaj uważnie podany przeze mnie przykład, masz tam dodatkową klasę

.fadeIn.fadeIn--after { 
  opacity: 1;
}

która zawiera wszystko to co jest w ostatniej klatce keyframe :P

a javascript dodaje .fadeIn--after do elementu, po zakończeniu animacji