Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
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