Приостановить анимацию между каждым поворотом на пять секунд - PullRequest
Новая
       5

Приостановить анимацию между каждым поворотом на пять секунд

1 голос
/ 25 апреля 2019

Я работаю над этой демонстрацией. Как я могу добавить пять секунд задержки к этой анимации между каждым поворотом? 

.card {
    background: #00f;
    width: 100px;
    height: 100px;
    animation: rotate 4s infinite;
    -webkit-animation: rotate 4s infinite;
}

@-webkit-keyframes rotate {
    100% {
        transform: rotate(90deg);
    }
}
@keyframes rotate {
    50% {
        transform: rotate(-90deg);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">A</div>

Ответы [ 2 ]

2 голосов
/ 25 апреля 2019

Вы можете установить общее время анимации равным 9 секундам (= 4 секунды для анимации + 5 секунд для паузы) и соответственно отрегулировать процентные шаги, вычисляя процентную долю в 4 секунды по отношению к 9 секундам (= около 44%)

.card {
    background: #00f;
    width: 100px;
    height: 100px;
    animation: rotate 9s infinite;
}

@keyframes rotate {
    22% {
        transform: rotate(90deg);
    }
    44% {
        transform: rotate(0deg);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">A</div>

Дополнение: Вторая версия, где пауза составляет между вращением вперед и назад: 

.card {
    background: #00f;
    width: 100px;
    height: 100px;
    animation: rotate 9s infinite;
}

@keyframes rotate {
    22% {
        transform: rotate(90deg);
    }
    78% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">A</div>

Еще одно дополнение: третья версия, с паузами между всеми поворотами:

(просто отрегулируйте значения в процентах и ​​время анимации по желанию) 

.card {
    background: #00f;
    width: 100px;
    height: 100px;
    animation: rotate 20s infinite;
}

@keyframes rotate {
    25% {
        transform: rotate(90deg);
    }
    50% {
        transform: rotate(90deg);
    }
    75% {
        transform: rotate(0deg);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">A</div>
1 голос
/ 25 апреля 2019

Вы можете сделать, как предложено, и добавить более длительную задержку, или вы можете перевести ключевые кадры между процентами, чтобы при желании показать более заметный разрыв между итерациями.

Подробнее здесь 

.card {
  background: #00f;
  width: 100px;
  height: 100px;
  animation: rotate 5s infinite;
  -webkit-animation: rotate 5s infinite;
}

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

@keyframes rotate {
   0%,25% {
    transform: rotate(90deg);
  }
  25%,50% {
    transform: rotate(-90deg);
  }
  50%,80% {
    transform: rotate(90deg);
  }
  80%,100% {
    transform: rotate(-90deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">A</div>
...