Как сделать паузу на последнем шаге анимации перед возвратом из start в бесконечной анимации

#css #css-animations #font-awesome

#css #css-анимации #шрифт-потрясающий

Вопрос:

Привет, моя цель — приостановить анимацию на 1 секунду в 90 градусах / последнем кадре, а затем запустить ее снова.Это простая анимация, позволяющая пользователю поворачивать экран в lanscape Fiddle Здесь

 <div>
  <div>
  Testing
  </div>
  <div>
   <div style="padding-top: 20px;padding-bottom: 20px">
            <i class="fas fa-mobile-alt mobile-rotate"></i>
        </div>
  </div>
</div>


  .mobile-rotate{
    font-size: 14px;
    -webkit-animation:spin 1.5s linear infinite;
    -moz-animation:spin 1.5s linear infinite;
    animation:spin 1.5s linear infinite;
    font-size: 30px;
  }

  @-moz-keyframes spin { 100% { -moz-transform: rotate(90deg); } }
  @-webkit-keyframes spin { 100% { -webkit-transform: rotate(90deg); } }
  @keyframes spin { 100% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } }
}

1. Добавьте шаг в x%, который уже поворачивает элемент на 90 градусов, так что между этими x% и 100% фактически больше нет вращения. Рассчитайте, сколько x должно быть, исходя из вашей общей продолжительности анимации и времени, в течение которого вы хотите, чтобы она оставалась неподвижной …

2. @04FS Спасибо, понял

Ответ №1:

Вы можете добавить 50% шаг в анимации и иметь transform конец там, пока анимация не завершится. Кроме того, я добавил полсекунды к продолжительности анимации, чтобы transform можно было сделать паузу на целую секунду.

 .mobile-rotate {
  font-size: 14px;
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  font-size: 30px;
}

@-moz-keyframes spin {
  50% {
    -moz-transform: rotate(90deg);
  }
  100% {
    -moz-transform: rotate(90deg);
  }
}

@-webkit-keyframes spin {
  50% {
    -webkit-transform: rotate(90deg);
  }
  100% {
    -webkit-transform: rotate(90deg);
  }
}

@keyframes spin {
  50% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css">
<div>
  <div>
    Testing
  </div>
  <div>
    <div style="padding-top: 20px;padding-bottom: 20px">
      <i class="fas fa-mobile-alt mobile-rotate"></i>
    </div>
  </div>
</div>

jsFiddle