Вращение css без паузы
У меня есть это маленькое изображение, которое я хочу постоянно вращать или, по крайней мере, иметь более короткий перерыв между анимациями.
Вот гифка с поведением (это немного некрасиво из-за моего программного обеспечения для записи gif, но пауза - это то, что я хочу здесь выделить):
Мой css (меньше):
.add{
vertical-align: middle;
line-height: 35px;
display: inline-block;
margin-top: 8px;
margin-left:5px;
svg{
fill:@colorOnBright;
max-width: 30px;
max-height: 25px;
vertical-align: middle;
}
}
.animated {
animation-name: rotation;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
@keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
разметка:
<svg class = "add animated" click.delegate = "Add()">
<use xlink:href = "#add"></use>
</svg>
Итак, как мне избавиться от паузы? или, в качестве альтернативы, сделайте паузу короче.
Заранее спасибо.
Обновлено: Я не могу понять этого ... Я пробовал воссоздать эту вещь ручкой, и она отлично работает. Есть ли какое-то другое css-свойство, которое как-то мешает анимации?
https://codepen.io/litari/pen/ajdpjp
edit2:
Если я просматриваю и просматриваю анимацию, я получаю следующее:
Таким образом, он изменяется от 0 до 360 градусов при 25%, а для оставшихся 75% он просто остается на 360 градусов.
или: легкость входа-выхода. У вас нет паузы в вашей анимации, она перескакивает только на 1 градус для перезапуска. (полное вращение - 360 градусов) демонстрация легкости входа codepen.io/anon/pen/vaLgNZ
Ни linear, ни eas-in-out у меня не сработали. По-прежнему получай ту же паузу
затем вам нужно добавить еще несколько шагов к вашей анимации и настроить их для получения ожидаемого результата (префикс -webkit- больше не требуется или его также следует использовать для ключевых кадров и анимации ....)
Ответы 4
Если я правильно вас понял, замените:
.animated {
animation-timing-function: ease;
}
с участием:
.animated {
animation-timing-function: linear;
}
The linear timing-function value maintains the same speed throughout the animation.
https://www.smashingmagazine.com/2014/04/understanding-css-timing-functions/#linear
div {
display: inline-block;
}
.animated {
animation-name: rotation;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease;
transform-origin: center;
}
@keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
.linear {
animation-timing-function: linear;
}<div class = "animated">+</div>
<p>and with linear:</p>
<div class = "animated linear">+</div>Я добавил ручку в пост. Там отлично работает, но не в моем коде: S
@JohanHjalmarsson Я только что добавил к своему ответу фрагмент, чтобы вы могли видеть, что он работает.
О вашем редактировании: 1. Может быть, есть другая роль (из фреймворка или чего-то еще), которая переопределяет ваш стиль. 2. Если нет. каким-то образом, используя from и to, но настраиваемые числа в процентах.
Я использую Аурелию. Я осмотрю элемент и посмотрю, не происходит ли что-то странное. Если я следую вашему отрывку, мой все равно приостанавливается.
Моя тоже быстрее вращается. И пауза связана с моей продолжительностью. Поэтому я думаю, что когда у меня продолжительность 2 секунды, он вращается на 1 секунду и останавливается на 1 секунду.
Это не имеет смысла, если что-то еще не отменяет вашу анимацию. Попробуйте заменить класс элемента .animated на другой (например, .blabla). Я предполагаю, что другая библиотека нацелена на класс animated.
Попробуйте использовать это небольшое изменение
animation-timing-function: linear;
animation-duration: 3s;
-webkit-transform: rotate(360deg);
Настройка animation-timing-function: linear и -webkit-transform: rotate(360deg) работает нормально
.animated {
width: 50px;
height: 50px;
border-radius: 50%;
background: black;
animation-name: rotation;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.ball{
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
}
<div class = "animated">
<div class = "ball"></div>
</div>
По-прежнему никакой разницы: S Я пробовал и FF, и хром. Ваш пример работает, но мой все еще приостанавливается ..
Попробуйте очистить историю браузера. И если возможно, пришлите мне свой фрагмент кода
Нашел проблему! Где-то в моем проекте уже была анимация под названием вращение. Сменил название и все нормально работает.
Спасибо всем за ответы
Вы пробовали изменить функцию времени анимации: легкость; к функции-времени-анимации: linear; ?