Can anybody tell me why the animation will not reverse if the two time parameters are identical for both clockwise and counter-clockwise please ?

specifically: animation: rotate 1.5s infinite linear;

 

    <div class="outer">
      <div class="inner">
      </div>
    </div>

.outer {
  width: 200px;
  height: 200px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 700px;
  border: 30px solid white;
  border-bottom: 30px solid transparent;
  border-right: 30px solid transparent;
  animation: rotate 1.5s infinite linear;
}

.inner {
  width: 100px;
  height: 100px;
  display: block;
  border-radius: 700px;
  opacity: 0.7;
  border: 25px solid white;
  border-bottom: 25px solid transparent;
  border-right: 25px solid transparent;
  transform: rotate(-0.50turn);
  animation: rotate 0.5s infinite linear;
  animation-direction: reverse;
}


@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

I have to set them one second apart for the animation to work, otherwise the inner circle will just keep rotating clockwise ?!

 

Further, if commenting out the animation code on ".outer" you'll notice that the two circles will orient their two respective open ends toward each other, thank to the "-0.50turn" transform property in ".inner".

I would like to have this as the very first frame, only adjusted vertically (zero degrees), before the animation begins, how would I achieve this please ?

Try adding animation-direction: reverse or defining a second keyframe that rotates the opposite way. Just matching the timing won’t flip the direction on its own.

You need separate keyframes for clockwise and counter clockwise, because repeating the same animation just loops forward. I usually create a second animation with a negative rotate value. When I’m tuning the durations, I use a time calculator to keep everything synced, since tiny mismatches can make the reverse movement look off. The browser only reverses if you explicitly tell it to with keyframes or animation-direction.

Edited June 19Jun 19 by Foreverseit