Как правильно сделать задержку начала анимации в css?

Question

Всем привет. Не получается сделать задержку анимации при начале движения объекта. Алгоритм следующий:

открывается страница
через, пусть будет 5 сек, появляется объект и начинает движение
на последнем кадре анимация заканчивается (это у меня работает)

не хочет работать -webkit-animation-animation-delay: animKrysa 4s Или я что-то не понимаю в задержке анимации? Будьте добры помогите. Ссылка в Codepen https://codepen.io/bsi_52/pen/rNMmdPY

@keyframes animKrysa {
  0% {
    transform: translateX(0) scale(0.4);
  }
  25% {
    transform: translateX(calc(50vw + 50px)) scale(0.1);
  }
  50% {
    transform: translateX(calc(50vw + 50px)) scale(0.05);
  }
  100% {
    transform: translateX(calc(50vw + 80px)) scale(0.001);
  }
}

.krysa {
-webkit-animation-animation-delay: animKrysa 4s; //Задержка анимации
    -moz-animation: animKrysa 6s  linear ;
    animation: animKrysa 6s  linear;
    -webkit-animation-iteration-count: 1; // Выполнить анимацию 1 раз
    -webkit-animation:  animKrysa 6s linear ;
    animation-fill-mode: forwards; // Останавливаем на последнем кадре
    -webkit-animation-fill-mode: forwards // Останавливаем на последнем кадре
}

<div class="container">
  <div class="image-stack">
    
<div class="krysa">
      <img src="Крыса.gif" alt="">    
</div>
  
 </div>
</div>

Answer 1

Потому что, во-первых, нет такого свойства -webkit-animation-animation-delay, есть -webkit-animation-delay, а, во-вторых, параметром должны быть только секунды - у Вас же зачем-то ещё название анимации указано. Потому и не работает.

Ну и после свойств с вендорными префиксами необходимо указывать свойства без них, иначе могут быть глюки.

@keyframes animKrysa {
  0% {
    transform: translateX(0) scale(0.4);
  }
  25% {
    transform: translateX(calc(50vw + 50px)) scale(0.1);
  }
  50% {
    transform: translateX(calc(50vw + 50px)) scale(0.05);
  }
  100% {
    transform: translateX(calc(50vw + 80px)) scale(0.001);
  }
}

.krysa {
   grid-row: 1;
   position: relative;
   transform: scale(0.9);
   -webkit-animation: animKrysa 6s linear;
   -moz-animation: animKrysa 6s linear;
   animation: animKrysa 6s linear;
   -webkit-animation-delay: 4s;
   animation-delay: 4s;
   -webkit-animation-iteration-count: 1;
   animation-iteration-count: 1;
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
}

<div class="krysa">
      <img src="https://i114.fastpic.ru/big/2020/1217/11/0f00eeb24a6b785335c46cdc18439511.gif" alt="">    
</div>

Answer 2

Проверьте запись animation.

И чтобы объект появился, он изначально должен быть скрыт (например через opacity), пример:

.krysa {
  grid-row: 1;
  position: relative;
  transform: scale(0.9);
  opacity: 0;
}




.krysa { 
  -webkit-animation: animKrysa 10s linear 5s forwards;
  -o-animation: animKrysa 10s linear 5s forwards;
  animation: animKrysa 10s linear 5s forwards; 
}


@keyframes animKrysa {
  0% {
    transform: translateX(0) scale(0.4);
  }
  5% {
    opacity: 1;
  }
  25% {
    transform: translateX(calc(50vw + 50px)) scale(0.1);
  }
  50% {
    transform: translateX(calc(50vw + 50px)) scale(0.05);
  }
  100% {
    transform: translateX(calc(50vw + 80px)) scale(0.001);
  }
}

<div class="container">
  <div class="image-stack">
    
<div class="krysa">
      <img src="https://i114.fastpic.ru/big/2020/1217/11/0f00eeb24a6b785335c46cdc18439511.gif" alt="">   
</div>
  
 </div>
</div>

БЛОГ НА HUSL

Как правильно сделать задержку начала анимации в css?

Ответы (2 шт):