Background Gradient Animation

@import "tailwindcss";
 
@theme inline {
  --animate-first: moveVertical 30s ease infinite;
  --animate-second: moveInCircle 20s reverse infinite;
  --animate-third: moveInCircle 40s linear infinite;
  --animate-fourth: moveHorizontal 40s ease infinite;
  --animate-fifth: moveInCircle 20s ease infinite;
}
 
@keyframes moveHorizontal {
  0% {
    transform: translateX(-50%) translateY(-10%);
  }
  50% {
    transform: translateX(50%) translateY(10%);
  }
  100% {
    transform: translateX(-50%) translateY(-10%);
  }
}
 
@keyframes moveInCircle {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
 
@keyframes moveVertical {
  0% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(-50%);
  }
}
Copy