css animation increment rotation without js

Question

I dont found similar question.. so i hope so you will not angry for me. Can I refactory or optimize this code in css? for example, by icrement in css for each next rotation 20deg++ or something Code work for me, but it takes a lot of space, i want to it take a little less, but still optimised (I want'nt use any js)

body {
  background: #0D1B2A;
  text-align: center;
}
svg{
  max-width: 100vw;
  max-height: 100vh;
  -webkit-animation: loaderRot 2s linear infinite;
    -webkit-animation-timing-function: step-end; 
}

@-webkit-keyframes loaderRot{
    0%{ 
        transform: rotate(0deg);
    }
    5.56%{ 
        transform: rotate(20deg);
    }
    11.11%{ 
        transform: rotate(40deg);
    }
    16.67%{ 
        transform: rotate(60deg);
    }
    22.22%{ 
        transform: rotate(80deg);
    }
    27.78%{ 
        transform: rotate(100deg);
    }
    33.33%{ 
        transform: rotate(120deg);
    }
    38.89%{ 
        transform: rotate(140deg);
    }
    44.44%{ 
        transform: rotate(160deg);
    }
    50%{ 
        transform: rotate(180deg);
    }
    55.56%{ 
        transform: rotate(200deg);
    }
    61.11%{ 
        transform: rotate(220deg);
    }
    66.67%{ 
        transform: rotate(240deg);
    }
    72.22%{ 
        transform: rotate(260deg);
    }
    77.78%{ 
        transform: rotate(280deg);
    }
    83.33%{ 
        transform: rotate(300deg);
    }
    88.89%{ 
        transform: rotate(320deg);
    }
    94.44%{ 
        transform: rotate(340deg);
    }
    100%{ 
        transform: rotate(360deg);
    }
}

Temani Afif · Accepted Answer

Simply use steps() then control the duration:

body {
  background: #0D1B2A;
  display:flex;
  height:100vh;
  margin:0;
}
svg{
  max-width: 70vmin;
  max-height: 70vmin;
  margin:auto;
  animation: loaderRot 2s infinite steps(18);
}

@keyframes loaderRot{to{transform: rotate(360deg)}}

css animation increment rotation without js

Answers (1)

Related Questions