Анимация градиента рамки input, почему не работает?

Question

[Valeriu Vodnicear]

сделал пример на codepe


там видно что анимация срабатывает один раз в 8 секунд, а нам нужно чтоб она на протяжений 8 секунд работала

подскажите пожаулйста куда искать решение

update:
проблема в том что поле для ввода прямоугольное, если было бы квадратным то все было бы нормально

а так, получаеться что анимация длиться одинаковое количество времени на каждую сторону, и для нас это выглядит как задержка на короткие стороны и быстрый рывок на длинную сторону

Comments

[Алексей Уколов]

один раз в 8 секунд, а нам нужно чтоб она на протяжений 8 секунд работала

Нет, она работает 8 секунд, а потом резко перескакивает из состояния to в состояние from.

[Valeriu Vodnicear]

Алексей Уколов, добавил для примера все возможные значения от 0% до 100%
https://codepen.io/vodnicear/pen/WNqaZeL

анимация работает так-же

[Ivan Ustûžanin]

easy-in != ease-in

[Valeriu Vodnicear]

IvanU7n, а это не меняет практически ничего
проблема в том что поле для ввода прямоугольное, если было бы квадратным то все было бы нормально

а так, получаеться что анимация длиться одинаковое количество времени на каждую сторону, и для нас это выглядит как задержка на короткие стороны и быстрый рывок на длинную сторону

Answer 1

[shsv382]

Замените animation: rotate 8s easy-in infinite;
на правильное animation: rotate 8s ease-in infinite;

Comments

[Valeriu Vodnicear]

а это не меняет практически ничего
проблема в том что поле для ввода прямоугольное, если было бы квадратным то все было бы нормально

а так, получаеться что анимация длиться одинаковое количество времени на каждую сторону, и для нас это выглядит как задержка на короткие стороны и быстрый рывок на длинную сторону

[shsv382]

Valeriu Vodnicear, тогда добавь alternate, чтобы направление анимации менялось на каждом цикле, тогда не будет рывка. А ещё поиграйся со свойством transform-origin, возможно рывок удастся как-то сгладить