Почему анимация градиента для рамки элемента input не работает?

Question

RubyEclipse

css , анимация

Почему анимация градиента для рамки элемента input не работает?

Я создал пример на CodePen: <a href="https://codepen.io/ainuragorea/pen/YzoJxYp" rel="nofollow">https://codepen.io/ainuragorea/pen/YzoJxYp</a>. В этом примере анимация срабатывает один раз каждые 8 секунд, но нам нужно, чтобы она продолжалась на протяжении 8 секунд. Не могли бы вы подсказать, где можно найти решение данной проблемы?

2 сентября 2024 г. 18:23

Ответы на вопрос 2

Похожие вопросы

Answer 1

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

Вот пример того, как можно это сделать:

1. Используйте `@keyframes` для создания анимации.
2. Задайте анимацию для рамки, используя `animation` с бесконечным повторением.

Вот пример кода, который можно использовать:

```css
@keyframes gradientAnimation {
  0% {
    border-image-source: linear-gradient(90deg, red, yellow);
  }
  50% {
    border-image-source: linear-gradient(90deg, yellow, blue);
  }
  100% {
    border-image-source: linear-gradient(90deg, blue, red);
  }
}

input {
  border: 5px solid;
  border-image-slice: 1;
  animation: gradientAnimation 8s linear infinite;
  padding: 10px;
  outline: none;
}
```

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

Вы можете проверить работает ли это, добавив этот код в ваш проект на CodePen. Теперь градиентная анимация должна функционировать, как ожидается.

Answer 2

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