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

Рейтинг: 0Ответов: 2Опубликовано: 25.02.2023

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

.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, как в моем примере то после анимации блок тоже пропадает

css-animation
Источник: Stack Overflow на русском

Ответы

▲ 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>

▲ 0

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