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 ?
Edited by right11, 21 September 2022 - 11:17 PM.