CSS Rotating Animation Stops for half a Second-CodePudding

I have this loading animation.but after every rotation it stops for a split second.is there a way to make it more fluid...im using after and before pseduo elements and animating the parent circle with animation-iteration-count to infinite.i am rotating it 405deg=45deg(intial value) 360deg

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color:#1A4D2E ;
}
.circle{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right:5px ;
    border-top: 1.5px solid#350cc9;
    fill:none;
    transform: rotate(45deg);
    position: relative;
    animation: loadanim 1.5s;
    animation-iteration-count: infinite;
    
}
.circle::before{
    content: "";
    position: absolute;
    top:2px;
    left: 5px;
    width: 30px;
    height:30px;
    border-radius: 50%;
    margin-right:5px ;
    border-top: 1.5px solid#f1f513;
    fill:none;
    transform: rotate(20deg);
}
.circle::after{
    content: "";
    position: absolute;
    top:6px;
    left: 8px;
    width: 25px;
    height:25px;
    border-radius: 50%;
    margin-right:5px ;
    border-top: 1.5px solid#f30ed4;
    fill:none;
    transform: rotate(20deg);
}
@keyframes loadanim{
    from{
        transform: rotate(45deg);
    }
    to{
        transform: rotate(405deg);
    }
}

<body>
    <div ></div>
    
</body>

CodePudding user response：

It's not completely stopping, but it's easing (the animation-timing-function). If you set it to use linear instead then it is continuous.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #1A4D2E;
}

.circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 5px;
  border-top: 1.5px solid#350cc9;
  fill: none;
  transform: rotate(45deg);
  position: relative;
  animation: loadanim 1.5s linear;
  animation-iteration-count: infinite;
}

.circle::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
  border-top: 1.5px solid#f1f513;
  fill: none;
  transform: rotate(20deg);
}

.circle::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 8px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  margin-right: 5px;
  border-top: 1.5px solid#f30ed4;
  fill: none;
  transform: rotate(20deg);
}

@keyframes loadanim {
  from {
    transform: rotate(45deg);
  }
  to {
    transform: rotate(405deg);
  }
}

<body>
  <div ></div>

</body>