#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>
Комментарии:
1. @J.Doe Рад, что это работает для вас. Если вы довольны ответом, я был бы признателен, если бы вы могли выбрать его в качестве выбранного ответа.