Ключевые кадры - градиентный фон не анимирован - PullRequest
Новая
       24

Ключевые кадры - градиентный фон не анимирован

0 голосов
/ 01 июня 2019

Я пытаюсь анимировать фоновый обмен с помощью @keyframes.Фон является радиальным градиентом.Фон изменяется, но он не анимирован. 

#mydiv {
background: radial-gradient(circle at 90% 80%, #ff0000, #4d0019);
width: 100%;
height: 1246px;
position: relative;
overflow: hidden;
animation: background-gradient 5s;
animation-iteration-count: infinite;
backface-visibility: hidden;
animation-timing-function: ease-in-out;
}

@-webkit-keyframes background-gradient {
0% {background: radial-gradient(circle at 90% 80%, #ff0000, #4d0019);}
25% {background: radial-gradient(circle at 90% 80%, #993399, #4d0019);}
50% {background: radial-gradient(circle at 90% 80%, #3333cc, #4d0019);}
75% {background: radial-gradient(circle at 90% 80%, #00ffcc, #4d0019);}
100% {background: radial-gradient(circle at 90% 80%, #cc9900, #4d0019);}
}

@keyframes background-gradient {
0% {background: radial-gradient(circle at 90% 80%, #ff0000, #4d0019);}
25% {background: radial-gradient(circle at 90% 80%, #993399, #4d0019);}
50% {background: radial-gradient(circle at 90% 80%, #3333cc, #4d0019);}
75% {background: radial-gradient(circle at 90% 80%, #00ffcc, #4d0019);}
100% {background: radial-gradient(circle at 90% 80%, #cc9900, #4d0019);}
}
<div id="mydiv"></div>

Я пробовал использовать только сплошные цвета, и он отлично работает (например, фон: красный, фон: желтый ...).

Я пыталсяbackground-image вместо просто фона на моих градиентах, это не помогает.

У вас есть какой-либо совет или вы знаете решение, как анимировать обмен, так что это не просто быстрый обмен цветами, а постепенный обмен из одногодругому.

1 Ответ

1 голос
/ 01 июня 2019

К сожалению, фоновые градиенты не анимируемы

К счастью для вас, ваш текущий дизайн не нуждается в анимации градиента, поскольку внешний цвет постоянен.

Просто сделайте градиент прозрачными установите сплошной изменяющийся цвет под 

#mydiv {
  width: 100%;
  height: 600px;
  position: relative;
  overflow: hidden;
  animation: background-gradient 5s;
  animation-iteration-count: infinite;
  backface-visibility: hidden;
  animation-timing-function: ease-in-out;
  background-image: radial-gradient(circle at 90% 80%, transparent, #4d0019);
}

@keyframes background-gradient {
  0% {
    background-color: #ff0000;
  }
  25% {
    background-color: yellow;
  }
  50% {
    background-color: #3333cc;
  }
  75% {
    background-color: #00ffcc;
  }
  100% {
    background-color: #cc9900;
  }
}
<div id="mydiv"></div>
...