Почему не работает animation-delay?

[nikki4]

Задача - появление блока внизу экрана спустя определенное время.

например для теста через 5 секунд, в течение 3х секунд всплытие

.block {
display:block; width:100%;max-height:340px; height:220px; position:fixed; background:coral; bottom: 0;
max-width:900px;
animation:anim 3s;
animation-duration:anim 3s;
  
  -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    -o-animation-delay: 5s;
    animation-delay: 5s;
}

@keyframes anim {
from {bottom:-100%;}
to {bottom:0;}
}

Живой пример

 

Если не добавлять задержку выезжает через 3 сек.

если добавить - сразу появляется и задержки нет.

 

 

разобрался с вопросом. Надо было изначально скрыть блок и в анимацию добавить появление:

@keyframes show{
	 0%{
		 opacity:1;
	 }
	 
	 
	 100% {
		 opacity:1;
	 }
	 from {bottom:-100%;}
to {bottom:0;}

}

 

Edited March 9, 2019 by nikki4

[decode]

animation-duration: принимает один аргумент - время