Как сделать задержку анимации?

Question

У меня есть анимация на css. Проект пишу на реакте. Мне нужно сделать задержку анимации т.е. чтобы блок всплывал, держался какое-то время на экране,например 10 секунд и потом плавно уплывал вниз. Подскажите, какие варианты существуют. Мне нужно изменить css код или использовать какую-то библиотеку для реакта. В реакте новичок.

@keyframes up {
  0% {
    transform: translateY(1000px);
  }
  10% {
    transform: translateY(0);
  }
  90% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(1000px);
  }
}

Answer 1

.test {
    animation: up 5s 2s forwards;
  transform: translateY(100px);
  opacity: 0;
}
@keyframes up {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  10% {
    transform: translateY(0);
      opacity: 1;
  }
  90% {
    transform: translateY(0);
      opacity: 1;
  }
  100% {
    transform: translateY(100px);
      opacity: 0;
  }
}

<div class="test">test</div>

`

БЛОГ НА HUSL

Как сделать задержку анимации?

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