Как продолжить анимацию и выполнять цикл только один раз

#javascript #css

Как сделать так, чтобы самолет летел вправо, затем исчезал, летел влево, и этот цикл
повторялся один раз для пользователя до повторного обновления страницы?



#Airplane {
  transform: translateX(0px);
  animation: move 10s ease-in-out infinite;
  position: absolute;
  width: 95px;
}

@keyframes fill {
  0% {
    height: 0;
    y: 125px
  }
  0%, 0% {
    height: 100px;
    y: 25px
  }
}

@keyframes move {
  90% {
    opacity: 1;
    transform: translateX(500px);
  }
  100% {
    opacity: 0;
    transform: translateX(500px);
  }
}




    

Ответы

Ответ 1

Для повторения анимации 1 раз можно установить свойство animation-iteration-count,
которое указывает на количество повторений анимации.
Конкретно по вашему примеру предлагаю следующий вариант:



#Airplane {
        transform: translateX(0px);
        animation: move 10s ease-in-out 1 forwards;
        position: absolute;
        width: 95px;
    }
    
        @keyframes move {
          
          0% {
            opacity: 1;
            transform: translateX(0);
          }
          40% {
            opacity: 1;
            transform: translateX(500px);
          }
          50% {
            opacity: 0;
            transform: translateX(500px);
          }
          51% {
            transform: translateX(500px) scaleX(-1);
          }
          60% {
            opacity: 1;
            transform: translateX(500px) scaleX(-1);
          }
          90% {
            opacity: 1;
            transform: translateX(0) scaleX(-1);
          }
          100% {
            opacity: 0;
            transform: translateX(0) scaleX(-1);
          }
        }





Здесь в строке animation единица устанавливает количество повторений анимации.

Для уменьшения скорости самолета можно изменить свойство animation-duration