0

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

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

Rybin
  • 35

2 Answers2

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>
Евгений Ли
  • 1,403
0

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

tygo
  • 363