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 that you have read and understand our privacy policy and code of conduct.

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