Анимация с задержкой, opacity

Question

У меня такая проблема

.title1{
  opacity: 0;
  animation: 3s 2s anim-lineUp ease-out;
}

@keyframes anim-lineUp {
  0% {
    opacity: 0;
    transform: translateY(80%);
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: translateY(0%);
  }
  100% {
    opacity: 1;

  }
}

как сделать так чтобы до начала анимации с задержкой не было видно блока, если ставить opacity, как в моем примере то после анимации блок тоже пропадает

Answer 1

Если суть вопроса в том, что бы не исчезал элемент, то вот.

.title1{
  opacity: 0;
  animation: 3s 2s anim-lineUp ease-out forwards;
  background: green;
  display: block;
  width: 50px;
  height: 50px;
}

@keyframes anim-lineUp {
  0% {
    opacity: 0;
    transform: translateY(80%);
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: translateY(0%);
  }
  100% {
    opacity: 1;

  }
}

<div class="title1"></div>

Answer 2

Используй animation-fill-mode: forwards

БЛОГ НА HUSL

Анимация с задержкой, opacity

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