CSS Animation-Iteration-Count путается с режимом Animation-fill-mode
Когда режим анимации-заполнения направлен вперед и используется Animation-Iteration-Count для повторения анимации, анимация сбрасывается после каждой итерации до последней, где, похоже, работает режим анимации-заполнения.
Я хотел анимировать перемещение элемента div вперед от 0 до 200 пикселей двумя движениями. Когда я создавал анимацию, она один раз переместилась на 100 пикселей, затем сбросилась на 0 пикселей, затем снова переместилась на 100 пикселей - в итоге она оказалась на 100 пикселей, а не на запланированных 200 пикселей. Я тестировал это на Firefox и Edge - ни один из них не работал. Я не смог найти никого с моей проблемой в Google.
Я собираюсь использовать эту анимацию для нескольких элементов, но хочу, чтобы некоторые из них перемещались вперед больше раз, чем другие. Я бы предпочел не использовать JS.
Прошу прощения за неточности в моем вопросе — я впервые использую stackoverflow.
div {
width: 100px;
height: 100px;
background-color: red;
animation: animation 2s 2 forwards;
}
@keyframes animation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
<div></div>
Ответы 2
Вы можете удалить повторение в animation и изменить ключевой кадр:
div {
width: 100px;
height: 100px;
background-color: red;
animation: animation 2s forwards;
}
@keyframes animation {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(200px);
}
}<div></div>Я хотел иметь только одну анимацию для перехода от 0 до 100 пикселей, так как я буду использовать ее для нескольких разных элементов с разным количеством итераций. Есть ли какой-нибудь другой известный вам способ сделать это без сброса? Спасибо!
Я бы посоветовал вам сделать 2 ключевых кадра.
Я нашел решение, используя JS. Проблема, по-видимому, не в прямом режиме анимации-заполнения, а в том, что анимация каждый раз сбрасывает преобразование. Если вместо этого вы используете скрипт для различной настройки преобразования на каждой итерации, а затем добавляете переходы, проблема решена.
div = document.querySelector("div");
console.info(div);
i = 1;
x = setInterval(() => {
var transform = "translateX("+i*100+"px)";
div.style.transform = transform;
div.style.webkitTransform = transform;
div.style.msTransform = transform;
if (i==2) {
clearInterval(x);
}
i++;
console.info(div.style.transform);
}, 1500);div {
width:100px;
height:100px;
background-color:red;
transition:transform 1s ease-in-out;
}<div></div>
Я опубликовал ответ, но понимаю, что вы можете захотеть, чтобы анимация достигла 100 пикселей, затем сбросилась до 0 пикселей и перешла на 200 пикселей?