Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
Photo

Same time duration prevents counter clockwise animation ?!


  • Please log in to reply

#1
right11

right11

    New Member

  • Member
  • Pip
  • 3 posts

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.

  • 0

Advertisements







Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP