in keyframes can i do a percent of a percent

hi(im getting banned for sure lol so many questions + stupidity)

@keyframes background {
          0%{--deg:45deg;}
          50%{
              0%{ --deg: 45deg;}
              7%{ --deg: 80deg ;}
              15%{ --deg: 100deg ;}
              25%{ --deg: 135deg;}
              32%{ --deg: 170deg ;}
              40%{ --deg: 190deg ;}
              50%{ --deg: 245deg;}
              57%{ --deg: 275deg ;}
              65%{ --deg: 290deg ;}
              75%{ --deg: 325deg;}
              82%{ --deg: 350deg ;}
              90%{ --deg: 370deg ;}
              100%{ --deg: 405deg;}
            }
          75%{--deg: 0deg;}
          100%{ --deg : 30deg}
        }

@keyframes background {
          0%{--deg:45deg;}
          50%{
              0%{ --deg: 45deg;}
              7%{ --deg: 80deg ;}
              15%{ --deg: 100deg ;}
              25%{ --deg: 135deg;}
              32%{ --deg: 170deg ;}
              40%{ --deg: 190deg ;}
              50%{ --deg: 245deg;}
              57%{ --deg: 275deg ;}
              65%{ --deg: 290deg ;}
              75%{ --deg: 325deg;}
              82%{ --deg: 350deg ;}
              90%{ --deg: 370deg ;}
              100%{ --deg: 405deg;}
            }
          75%{--deg: 0deg;}
          100%{ --deg : 30deg}
        }

how to do it from 50 % to 75% =I have a list of stuff to do and i want them to done in the exact order so when it reaches 50% of the main work till 75% I can split it to 100 parts (100%) now i want to do a exact thing in 25th part is it possible ? or anything like this?

19 Replies

lko•7d ago

@R.I.P I think you can use decimals, so 50.02%

R.I.P•7d ago

i dont wanna do the math thats the whole point this mess

Jochem•7d ago

is there a reason you can't just let the browser interpolate?

R.I.P•7d ago

i wrote the 50% part and now i changed my mined of this being the whole part i wanted to have sth else with it too

Jochem•7d ago

not sure what that means, if I'm honest

lko•7d ago

The math is easy

@keyframes background {
0%{--deg:45deg;}
50.0%{ --deg: 45deg;}
50.07%{ --deg: 80deg ;}
50.15%{ --deg: 100deg ;}
50.25%{ --deg: 135deg;}
50.32%{ --deg: 170deg ;}
50.40%{ --deg: 190deg ;}
50.50%{ --deg: 245deg;}
50.57%{ --deg: 275deg ;}
50.65%{ --deg: 290deg ;}
50.75%{ --deg: 325deg;}
50.82%{ --deg: 350deg ;}
50.90%{ --deg: 370deg ;}
51%{ --deg: 405deg;}
75%{--deg: 0deg;}
100%{ --deg : 30deg}
}

@keyframes background {
0%{--deg:45deg;}
50.0%{ --deg: 45deg;}
50.07%{ --deg: 80deg ;}
50.15%{ --deg: 100deg ;}
50.25%{ --deg: 135deg;}
50.32%{ --deg: 170deg ;}
50.40%{ --deg: 190deg ;}
50.50%{ --deg: 245deg;}
50.57%{ --deg: 275deg ;}
50.65%{ --deg: 290deg ;}
50.75%{ --deg: 325deg;}
50.82%{ --deg: 350deg ;}
50.90%{ --deg: 370deg ;}
51%{ --deg: 405deg;}
75%{--deg: 0deg;}
100%{ --deg : 30deg}
}

Jochem•7d ago

is there any reason to not just...

@keyframes background {
0%{--deg:45deg;}
50%{ --deg: 45deg;}
51%{ --deg: 405deg;}
75%{--deg: 0deg;}
100%{ --deg : 30deg}
}

@keyframes background {
0%{--deg:45deg;}
50%{ --deg: 45deg;}
51%{ --deg: 405deg;}
75%{--deg: 0deg;}
100%{ --deg : 30deg}
}

? the browser does the intermediate point math for you, if it's linear

lko•6d ago

I mean, from 50 to 50.07 it goes up to 35deg, and from 50.07 to 50.15 it goes up only by 20, so he probably doesn't want a gradual transition, idk

Jochem•6d ago

hmm, fair

R.I.P•6d ago

i want to devide 50% to 75% to 100part not 50% to 51% that would be easy if i could set the time for it like between ur 50.01% and 51.00% the time would be 10s and between 0 to 50% the time wwould be 2s 🥲

.test-conic::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: conic-gradient(
          from var(--deg) at 50% 50%,
          transparent 0% 9%,
          purple 10% 11%,
          transparent 12% 19%

          
        );
        background-color: white;
        /*top: 50%;
        left: 50%;
        translate: -50% -50%;*/
        inset: -8px;
        padding: 8px;
        z-index: -5;
        animation: background 5s infinite linear none;
      }
      .test-conic{
        width: 400px ;
        aspect-ratio: 1/1 ;
        position: relative ;
        background-color: black;
        border: black solid 3px;
        inset: 15px;
      }
@porperty --deg{
inherite: false;
sytanx: "<angle>";
initial-value: 0deg;}
with that from 0 to 360 keyframes it sucks at corner since it goes way faster

.test-conic::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: conic-gradient(
          from var(--deg) at 50% 50%,
          transparent 0% 9%,
          purple 10% 11%,
          transparent 12% 19%

          
        );
        background-color: white;
        /*top: 50%;
        left: 50%;
        translate: -50% -50%;*/
        inset: -8px;
        padding: 8px;
        z-index: -5;
        animation: background 5s infinite linear none;
      }
      .test-conic{
        width: 400px ;
        aspect-ratio: 1/1 ;
        position: relative ;
        background-color: black;
        border: black solid 3px;
        inset: 15px;
      }
@porperty --deg{
inherite: false;
sytanx: "<angle>";
initial-value: 0deg;}
with that from 0 to 360 keyframes it sucks at corner since it goes way faster

so yea this is the main reason im doing this and as i told I just wrote from 0 to 100% but now i decided that the animation duration would be 4 times longer and my 0 to 100 goes in third half which is the new 50% to 75% like i wanna compress the whole 0to 100 in a new 25% imagine u wrote some keyframes from 0 to 100 a long list like:

keyframes sth{
10%x
20%y
30%z
40%a
50%b
60%c
70%s
80%d
90%h
100%hh
}

keyframes sth{
10%x
20%y
30%z
40%a
50%b
60%c
70%s
80%d
90%h
100%hh
}

now u regeret it and want to make the exact same thing but in reverse tho u want both of them

{5%x
10%y
....
45%h
50%hh
now the opposite adds
55%h
60%d
....
90%y
95%x}

{5%x
10%y
....
45%h
50%hh
now the opposite adds
55%h
60%d
....
90%y
95%x}

so yea i dont wanna do this cause this is simple and what im gonna do pisses me off so how can i do it ? see again

Jochem•6d ago

You could set the direction of the animation to reverse? Or just edit the list by hand

R.I.P•6d ago

thats why i tried 50%{ 0% 10% 20%... 100%} but no luck

Jochem•6d ago

You want it to turn right and then turn left? I think there's an animation direction that'll go forward and then back... But you'll have to redo the key frames either way

R.I.P•6d ago

it was a example i dont want that specifically i know there is i want the changes to be in keyframes

Jochem•6d ago

Then you'll have to write them out There's no shortcut, and I don't think you can nest key frames like you tried

R.I.P•6d ago

ok tnx 🥲 im doomed yay can u try these and give me an idea on how to slow the rotation on corners? its ok if u dont want Its not my question anyways

Jochem•6d ago

Make a code pen or something similar and someone might be able to take a look. You've shared nothing but the animation and whether animations look good is dependent on the elements you apply them to and their surroundings I'm not at a pc so I can't take a look either way

R.I.P•6d ago

I cant 🥲 it doesnt let me sign up yay its ok hf

Jochem•6d ago

They might've had technical issues. #How To Ask Good Questions has other similar sites

Gaming

Programming

in keyframes can i do a percent of a percent