Kevin Powell - CommunityKP-C
Kevin Powell - Community•16mo ago•
8 replies
R.I.P

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;}

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);

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;

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);
  }
}

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)
Was this page helpful?