Как отключить свойство «duration» при достижении элементом определенной позиции?

Question

[John_nno20]

У меня есть элемент, в css которого прописано свойство «duration 5000». Посредством JS он движется из позиции 0% в позицию 100%. Мне нужно, чтобы при достижении позиции «100%» он моментально перемещался в позицию «0», и анимация, соответственно, начиналась заново. То есть чтобы свойство duration обнулялось при достижении позиции 100%. Это можно сделать, и если можно, как?

Comments

[Rustam Bainazarov]

Посмотрите в сторону анимаций на keyframes. Там есть эта возможность.

[John_nno20]

Рустам Байназаров, да я знаю, но проблема в том и состоит, что желательно это сделать при данных условиях - с duration.

[Rustam Bainazarov]

John_nno20, а в чём проблема задать длительность для анимации? Да и без длительности анимация вообще не будет работать, кстати.

Answer 1

[kupchic]

А зачем Js? Используй keyframes. @keyframes animationName {
0%{width:0%}
100% {width:100%}
}

и твоему элементу добавляй:
animation: animationName 5s ease-in-out infinity