Почему не анимируется border с градиентом?

Question

[HaiDik]

почему не получается сделать плавающий градиент? Градиент должен огибать блок и бесконечно вращаться. (пы сы: да, я рак - помогите пожалуйста)
CSS

@keyframes gradient {
  0% {-moz-border-image: -moz-linear-gradient(to top left, #ff0000 0%, #ed7272 100%);
  -webkit-border-image: -webkit-linear-gradient(to top left, #ff0000 0%, #ed7272 100%);
  border-image: linear-gradient(to bottom right, #ff0000 0%, #ed7272 100%);}
  12.5% {-moz-border-image: -moz-linear-gradient(to top, #ff0000 0%, #ed7272 100%);
  -webkit-border-image: -webkit-linear-gradient(to top, #ff0000 0%, #ed7272 100%);
  border-image: linear-gradient(to bottom, #ff0000 0%, #ed7272 100%);}
  25% {-moz-border-image: -moz-linear-gradient(to top right, #ff0000 0%, #ed7272 100%);
  -webkit-border-image: -webkit-linear-gradient(to top right, #ff0000 0%, #ed7272 100%);
  border-image: linear-gradient(to bottom left, #ff0000 0%, #ed7272 100%);}
  37.5% {-moz-border-image: -moz-linear-gradient(to right, #ff0000 0%, #ed7272 100%);
  -webkit-border-image: -webkit-linear-gradient(to right, #ff0000 0%, #ed7272 100%);
  border-image: linear-gradient(to left, #ff0000 0%, #ed7272 100%);}
  50% {-moz-border-image: -moz-linear-gradient(to bottom right, #ff0000 0%, #ed7272 100%);
  -webkit-border-image: -webkit-linear-gradient(to bottom right, #ff0000 0%, #ed7272 100%);
  border-image: linear-gradient(to top left, #ff0000 0%, #ed7272 100%);}
  62.5% {-moz-border-image: -moz-linear-gradient(to bottom, #ff0000 0%, #ed7272 100%);
  -webkit-border-image: -webkit-linear-gradient(to bottom, #ff0000 0%, #ed7272 100%);
  border-image: linear-gradient(to top, #ff0000 0%, #ed7272 100%);}
  75% {-moz-border-image: -moz-linear-gradient(to bottom left, #ff0000 0%, #ed7272 100%);
  -webkit-border-image: -webkit-linear-gradient(to bottom left, #ff0000 0%, #ed7272 100%);
  border-image: linear-gradient(to top right, #ff0000 0%, #ed7272 100%);}
  87.5% {-moz-border-image: -moz-linear-gradient(to left, #ff0000 0%, #ed7272 100%);
  -webkit-border-image: -webkit-linear-gradient(to left, #ff0000 0%, #ed7272 100%);
  border-image: linear-gradient(to right, #ff0000 0%, #ed7272 100%);}
  100% {-moz-border-image: -moz-linear-gradient(to top left, #ff0000 0%, #ed7272 100%);
  -webkit-border-image: -webkit-linear-gradient(to top left, #ff0000 0%, #ed7272 100%);
  border-image: linear-gradient(to bottom right, #ff0000 0%, #ed7272 100%);}
}

animation-name: gradient;
    animation-duration: 60s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;

Comments

[Ankhena]

Потому что градиенты не анимируются.
Вращайте блок (псевдоэлемент)

Answer 1

[WapSter]

Как уже сказали градиент не анимируется, но есть хитрость с позиционирование фона https://codepen.io/P1N2O/pen/pyBNzX