1

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

https://jsfiddle.net/1h8pzwmt/1/

<div class="preloader"></div>

.preloader {
    position: fixed;
    top: 50%;
    left: 44%;
    height: 5px;
    width: 300px;
    background-image: linear-gradient(270deg, #000, #fff, #000, #fff);
    animation: gradient 0.8s linear 2s infinite;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

@keyframes gradient {
    0% {
        background-position: -100px 0;
    }
    50% {
        background-position: 120% 0;
    }
    100% {
        background-position: 180% 0;
    }
}

2
  • 1
    animation: gradient 5s ease infinite;
    – Arcadiy
    11 янв 2022 в 11:34
  • @Arcadiy, и чем же это лучше linear?
    – Qwertiy
    11 янв 2022 в 11:43

1 ответ 1

3

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 5px;
  width: 300px;
  background: linear-gradient(270deg, #000, #fff, #000, #fff, #000);
  animation: gradient 0.8s linear infinite;
}

@keyframes gradient {
  from { background-position:    0   0; }
  to   { background-position:  300px 0; }
}
<div class="preloader"></div>

1
  • Забавно выглядит (+) 11 янв 2022 в 12:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.