Анимация, не пойму почему так происходит.

Общее
1

Параметры:

  1. animation-iteration-count: infinite; (Анимация повторяется бесконечно)
  2. animation-fill-mode: forwards; (Элемент должен(но не делает) сохранять состояние после завершения анимации.)

Суть проблемы:
По моей логике, после каждого круга анимации от 0% до 100%, элемент сдвигается и должен остаться в этом состоянии , в следующем круге он должен сдвигаться дальше, но почему-то его откидывает в первоначальное положение.

:confused: .

2

Анимация идет по кругу от первого кадра до последнего. animation-fill-mode: forwards; должен сохранять положение элемента при окончании анимации. Но у вас она бесконечна. То есть вы сами себе противоречите.

3

Я правильно понимаю что transform: translateX(40px); перемещает объект в право по оси Х на 40 пикселей ? или просто изменяет координаты объекта ?

По моей логике после каждого круга Анимации блок должен переместиться правее на 40+80+120+160 пикселей, там остаться в силу свойства фил-мод, далее должен начаться следующий круг анимации который опять будет перемещать блок правее .

4

transform: translateX(40px); показывает конечную координату положения блока, то есть на следующем круге анимации объект возвращается в положение 40px правее от исходного положения в потоке документа.

1 лайк