@HaiDik

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

почему не получается сделать плавающий градиент? Градиент должен огибать блок и бесконечно вращаться. (пы сы: да, я рак - помогите пожалуйста)
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;
  • Вопрос задан
  • 58 просмотров
Решения вопроса 1
wapster92
@wapster92 Куратор тега CSS
Люблю трилогию ME
Как уже сказали градиент не анимируется, но есть хитрость с позиционирование фона https://codepen.io/P1N2O/pen/pyBNzX
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы