Как сделать анимацию вращающегося linear-gradient background?

Question

Как сделать анимацию вращающегося linear-gradient background?

Рейтинг: 2Ответов: 2Опубликовано: 26.03.2023

У меня есть фон с линейным градиентом, и я хочу сделать анимацию на его вращение. Мой код не работает. Чего мне не хватает?
Мне нужно вращать сам градиент, а не элемент. Я хочу сделать анимацию, как карточки по этой ссылке: https://nuxt.com/. Это возможно только если анимировать сам background (Там есть padding, и он должен быть с градиентом, так что на самом деле анимируется фон элемента позади него, а не border).

.block {
  width: 200px;
  height: 200px;
}

.block__bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(360deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3));
  animation: gradient-rotate 5s linear 0s infinite reverse;
  transition: all .3s linear;
}

@keyframes gradient-rotate {
  0% {
    background: linear-gradient(360deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3));
  }
  to {
    background: linear-gradient(0deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3));
  }
}

<div class="block">
  <div class="block__bg"></div>
</div>

css html css-animation

Источник: Stack Overflow на русском

Answer 1

▲ 7Принят

Можно вращать псевдоэлемент вместо самого блока:

.block {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.block::before {
  content: '';
  position: absolute;
  top:50%;
  left:50%;
  width: 150%;
  height: 150%;
  transform: translate(-50%, -50%) rotate(0turn);
  background: linear-gradient(#00dc82, #fff, #36e4dab3, #1de0b14d);
  animation: gradient-rotate 5s ease-in-out 0s infinite alternate;
}

@keyframes gradient-rotate {
  to { transform: translate(-50%, -50%) rotate(1turn); }
}

<div class="block"></div>

Для всех браузеров, кроме Firefox и Safari:

@property --my-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0turn;
}

.block {
  width: 200px;
  height: 200px;
  background: linear-gradient(var(--my-angle), #00dc82, #fff, #36e4dab3, #1de0b14d);
  animation: gradient-rotate 5s ease-in-out 0s infinite alternate;
}

@keyframes gradient-rotate {
  to { --my-angle: 1turn; }
}

<div class="block"></div>

Answer 2

▲ 3

Думаю как-то так, шагов можно больше прописать, анимацию как я понял Вы хотели туда-сюда крутить, поэтому поставил alternate-reverse остальное сами добавите по вкусу:

.block {
  width: 200px;
  height: 200px;
}

.block__bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(360deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3));
  animation: gradient-rotate 2s linear 0s infinite alternate-reverse;
  transition: all .3s linear;
}

@keyframes gradient-rotate {
  10% {
    background: linear-gradient(324deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3));
  }
  20% {
    background: linear-gradient(288deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3));
  }
  30% {
    background: linear-gradient(252deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3));
  }
  40% {
    background: linear-gradient(216deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3));
  }
  50% {
    background: linear-gradient(180deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3));
  }
  60% {
    background: linear-gradient(144deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3));
  }
  70% {
    background: linear-gradient(108deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3));
  }
  80% {
    background: linear-gradient(72deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3));
  }
  90% {
    background: linear-gradient(36deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3));
  }
  100% {
    background: linear-gradient(0deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3));
  }
}

<div class="block">
  <div class="block__bg"></div>
</div>

Как сделать анимацию вращающегося linear-gradient background?

Ответы