animation with gradiants

hi how can i get a animation css like this

.dd2::before{
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background-image:
            repeating-conic-gradient(
            from var(--deg),
            purple  0deg 25deg,
            rgba(0,0,0,0)  25deg 90deg);
            z-index: -4;
            animation: dd2before 5s infinite linear none;}
        @keyframes dd2before{
        from{--deg: 360deg;}
        to{--deg: 0deg;}
}
@property --deg{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;}

.dd2::before{
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background-image:
            repeating-conic-gradient(
            from var(--deg),
            purple  0deg 25deg,
            rgba(0,0,0,0)  25deg 90deg);
            z-index: -4;
            animation: dd2before 5s infinite linear none;}
        @keyframes dd2before{
        from{--deg: 360deg;}
        to{--deg: 0deg;}
}
@property --deg{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;}

which lets me to rotate stuff in the background without rotating the box I got 2 issues here first is about going

 background:linear-gradient(blue,red,purple);

 background:linear-gradient(blue,red,purple);

how can i animate it like conic gradient above? 2nd is how can i animate this

background:
radial-gradient(
at 8.827085852478838% 8.963641188959661%,
#ff006f 0px, transparent 50%) ,

radial-gradient(
at 14.026602176541717% 80.08890658174099%,
#9818dc 0px, transparent 50%) ,
            
radial-gradient(
at 79.68561064087062% 81.15047770700637%,
#eb02d7 0px, transparent 50%)

radial-gradient(
at 51.26964933494559% 48.029458598726116%,
#162cd4 ,red 50px, transparent 50%) #000000;

background:
radial-gradient(
at 8.827085852478838% 8.963641188959661%,
#ff006f 0px, transparent 50%) ,

radial-gradient(
at 14.026602176541717% 80.08890658174099%,
#9818dc 0px, transparent 50%) ,
            
radial-gradient(
at 79.68561064087062% 81.15047770700637%,
#eb02d7 0px, transparent 50%)

radial-gradient(
at 51.26964933494559% 48.029458598726116%,
#162cd4 ,red 50px, transparent 50%) #000000;

again i want to rotate the background not the box with the -25% inset like below

z-index:-1;
content:'';
position:absolute;
inset: -25%;
background-image: conic-gradient(
    hsl(297.3, 84.6%, 20.4%),
    hsl(192.6, 51.4%, 58.0%),
    hsl(297.3, 84.6%, 20.4%)
);
animation: 3s linear infinite rot;
}
@keyframes rot {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

z-index:-1;
content:'';
position:absolute;
inset: -25%;
background-image: conic-gradient(
    hsl(297.3, 84.6%, 20.4%),
    hsl(192.6, 51.4%, 58.0%),
    hsl(297.3, 84.6%, 20.4%)
);
animation: 3s linear infinite rot;
}
@keyframes rot {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

i would appreciate if u could say it and the rotations should work this is real code unless i missed sth (i mean u can see it for yourself what i mean but for the last one use inspect then u see the before is rotating not background)

7 Replies

R.I.POP•3mo ago

emmmmmm aynone got any idea ?

MarkBoots•3mo ago

well, the conic and linear will work because the direction/angle is part of syntax conic-gradient(from var(--deg), red, blue, green) linear-gradient(var(--deg), red, blue, green) a radial-gradient doesn't have that. you could try to rotate the box with var(--deg) and set a overflow hidden on the parent. But then you'll have to make sure the size of the box is okay (hard to tell without a real example) something like this: https://codepen.io/MarkBoots/pen/wvVgbJx?editors=1100 maybe make a codepen so we can try

R.I.POP•3mo ago

yea tnx man but for the second i dont want rotate i just want the inside ones to rotate without the rotate and increasing the size of the picture I had the idea of making it to go around with at var var but thats a lot of problem so for multiple gradiants is there a simpler way to do it? but for the first one i see now what is cahgnes and tnx a ton

Tok124 (CSS Nerd)•3mo ago

@R.I.P https://codepen.io/tok124/pen/MWNoqOm Here you have a rotating radial gradient. No rotating pseudo element or anything like that here. Just a single div with a ball that spins around a circular path inside the element

Tim

CodePen

Untitled

...

Tok124 (CSS Nerd)•3mo ago

Btw, if you want multiple radial-gradients that spins around a circular path, you can do this https://codepen.io/tok124/pen/rNXwqBK Still no pseudo element. Just a single div with multiple radial-gradients

R.I.POP•2mo ago

tnx a ton man

Tok124 (CSS Nerd)•2mo ago

No problem 🙂

Gaming

Programming

animation with gradiants