CSS фоновый градиентный переход не работает - PullRequest
Новая
       59

CSS фоновый градиентный переход не работает

0 голосов
/ 04 мая 2018

Я пытаюсь анимировать градиентный фон с помощью @keyframes, но по какой-то причине анимация не происходит. У меня есть все префиксы поставщиков, и я правильно написал название анимации. Я использую генератор для этого: https://www.gradient -animator.com / , который там работает.

См. Пример ниже: 

@-webkit-keyframes warpedBackground {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes warpedBackground {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes warpedBackground { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

#gradientsquare {
  width: 300px;
  height: 300px;
  background: linear-gradient(170deg, #003a5d, #94c7e6);
  background-size: 100% 100%;
  
  -webkit-animation: warpedBackground 1s ease infinite;
  -moz-animation: warpedBackground 1s ease infinite;
  animation: warpedBackground 1s ease infinite;
}
<div id="gradientsquare"></div>

Код почти такой же, поэтому я не уверен, почему мой не работает ...

1 Ответ

0 голосов
/ 04 мая 2018

Указав backgrouns-size:100% 100%, вы сделали размер градиента таким же, как у div; таким образом, все значения background-position эквивалентны, поэтому вы не увидите никакого движения. Измените background-size, и градиент сместится.

Сделать больше, чем div 

@keyframes warpedBackground { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

#gradientsquare {
  border:1px solid;
  width: 300px;
  height: 300px;
  background: linear-gradient(170deg, #003a5d, #94c7e6);
  background-size: 500% 100%;

  animation: warpedBackground 1s ease infinite;
}
<div id="gradientsquare"></div>

Сделать его меньше чем div: 

@keyframes warpedBackground { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

#gradientsquare {
  border:1px solid;
  width: 300px;
  height: 300px;
  background: linear-gradient(170deg, #003a5d, #94c7e6);
  background-size: 50% 100%;
  background-repeat:no-repeat;
  
  animation: warpedBackground 1s ease infinite;
}
<div id="gradientsquare"></div>
...