Why the spinner is moving strangely?

Question

I have a spinner around a circle that moves in a closed circle path, On hovering over the circle the spinner is fired, It's not moving smoothly, But it seems like it's moving right and left from specific parts, Like it's getting wider from parts and smaller from others.

.item-circled {
 position: relative;
 width: 157.5px;
 margin: 5% 40px;
 display: inline-block;
}

.item-circled .face-container {
 position: relative;
 width: 157.5px;
 height: 157.5px;
 z-index: 1;
 perspective: 1000px;
}

.item-circled .face-card {
 width: 100%;
 height: 100%;
 transform-style: preserve-3d;
 border-radius: 50%;
 transition: all .5s linear;
}

.item-circled .face-container:hover .face-card {
 transform: rotateY(180deg);
 border-radius: 50%;
}

.item-circled .face-1 {
 position: absolute;
 width: 100%;
 height: 100%;
 backface-visibility: hidden;
 overflow: hidden;
 border-radius: 50%;
}

.item-circled .face-1.front{
  background-color: #f7eebe;
  width: 100%;
  height: 100%
}

.item-circled .face-1.back {
 display: block;
 box-sizing: border-box;
 padding: 35px 13px;
 text-align: center;
 background-color: #1f4e79;
 transform: rotateY(180deg);
 border-radius: 50%;
}

.item-circled .dashed-border {
 position: absolute;
 border-radius: 50%;
 border: 2px dashed #18d9ec;
 height: 187.5px;
 width: 187.5px;
 top: -15px;
 left: -15px;
}

.item-circled:hover .dashed-border {
 animation-duration: 0.5s;
 animation-timing-function: linear;
 animation-name: spiner;
 animation-iteration-count: infinite;
}

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<div class="item-circled">
  <div class="face-container center-block text-center">
   <div class="face-card">
     <!-- Front side -->
    <div class="face-1 front">
     <p>front</p>
   </div>
      <!-- Back side -->
    <div class="face-1 back">
    <p>back</p>
   </div>
  </div>
    <!-- Spinner element -->
  <div class="dashed-border"></div>
 </div> <!-- face-conteiner -->
</div> <!-- item-circled -->

Here is a fiddle to see the result: http://jsfiddle.net/os7bL0pr/12

Your dashed line circle does not have perfect separation between the dashed lines... Look at the very top, they are together, try running it slower animation youll see it — Andrew, Jul 19 '18 at 16:21
the real question is why sis your dashed line circle not perfect — Andrew, Jul 19 '18 at 16:22
I din't know how this is possible, The border `border: 2px dashed #18d9ec;` — , Jul 19 '18 at 16:24
My guess is it does not like rotating around the fractional width and height. If you just dump the .5 does it wobble? And I did something similar and found dotted to be better since dashed had different lengths. — epascarello, Jul 19 '18 at 16:40
@epascarello, I changed `dashed` to `dotted`, But still the same http://jsfiddle.net/os7bL0pr/39/ — , Jul 19 '18 at 16:44
@epascarello, Here it is without fractional numbers http://jsfiddle.net/os7bL0pr/42/ — , Jul 19 '18 at 16:47
Also I can't set the width and height to percentage values, Because the element will disappear then — , Jul 19 '18 at 16:59
Possible duplicate of [Control the dashed border stroke length and distance between strokes](https://stackoverflow.com/questions/2771171/control-the-dashed-border-stroke-length-and-distance-between-strokes) — Andrew, Jul 19 '18 at 17:15

Any Moose · Answer 1 · 2018-07-19T19:06:03.103

The wobble you are sseing is because a 360 degree circle has no 0 degree so you are trying to tell the animation to return to a non-point 0deg then start from 1deg as usual. Change the degree from 0 to 1

.item-circled {
 position: relative;
 width: 157.5px;
 margin: 5% 40px;
 display: inline-block;
}

.item-circled .face-container {
 position: relative;
 width: 157.5px;
 height: 157.5px;
 z-index: 1;
 perspective: 1000px;
}

.item-circled .face-card {
 width: 100%;
 height: 100%;
 transform-style: preserve-3d;
 border-radius: 50%;
 transition: all .5s linear;
}

.item-circled .face-container:hover .face-card {
 transform: rotateY(180deg);
 border-radius: 50%;
}

.item-circled .face-1 {
 position: absolute;
 width: 100%;
 height: 100%;
 backface-visibility: hidden;
 overflow: hidden;
 border-radius: 50%;
}

.item-circled .face-1.front{
  background-color: #f7eebe;
  width: 100%;
  height: 100%
}

.item-circled .face-1.back {
 display: block;
 box-sizing: border-box;
 padding: 35px 13px;
 text-align: center;
 background-color: #1f4e79;
 transform: rotateY(180deg);
 border-radius: 50%;
}

.item-circled .dashed-border {
 position: absolute;
 border-radius: 50%;
 border: 2px dashed #18d9ec;
 height: 187.5px;
 width: 187.5px;
 top: -15px;
 left: -15px;
}

.item-circled:hover .dashed-border {
 animation-duration: 0.5s;
 animation-timing-function: linear;
 animation-name: spiner;
 animation-iteration-count: infinite;
}

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<div class="item-circled">
  <div class="face-container center-block text-center">
   <div class="face-card">
     <!-- Front side -->
    <div class="face-1 front">
     <p>front</p>
   </div>
      <!-- Back side -->
    <div class="face-1 back">
    <p>back</p>
   </div>
  </div>
    <!-- Spinner element -->
  <div class="dashed-border"></div>
 </div> <!-- face-conteiner -->
</div> <!-- item-circled -->

no, it no longer wobbles. if they want to stop the jummpy effect they need to speed it up. without the change to the degree it still wobbles as in the other answer. — Any Moose, Jul 19 '18 at 16:28

score 0 · Answer 2 · answered Jul 19 '18 at 16:19

Try speeding up the duration of the animation

http://jsfiddle.net/os7bL0pr/12

I have update the time from 0.5s to 0.05s

.item-circled:hover .dashed-border {
    animation-duration: 0.05s;
    animation-timing-function: linear;
    animation-name: spiner;
    animation-iteration-count: infinite;
}

That appears to smooth out the weird motion

.item-circled {
 position: relative;
 width: 157.5px;
 margin: 5% 40px;
 display: inline-block;
}

.item-circled .face-container {
 position: relative;
 width: 157.5px;
 height: 157.5px;
 z-index: 1;
 perspective: 1000px;
}

.item-circled .face-card {
 width: 100%;
 height: 100%;
 transform-style: preserve-3d;
 border-radius: 50%;
 transition: all .5s linear;
}

.item-circled .face-container:hover .face-card {
 transform: rotateY(180deg);
 border-radius: 50%;
}

.item-circled .face-1 {
 position: absolute;
 width: 100%;
 height: 100%;
 backface-visibility: hidden;
 overflow: hidden;
 border-radius: 50%;
}

.item-circled .face-1.front{
  background-color: #f7eebe;
  width: 100%;
  height: 100%
}

.item-circled .face-1.back {
 display: block;
 box-sizing: border-box;
 padding: 35px 13px;
 text-align: center;
 background-color: #1f4e79;
 transform: rotateY(180deg);
 border-radius: 50%;
}

.item-circled .dashed-border {
 position: absolute;
 border-radius: 50%;
 border: 2px dashed #18d9ec;
 height: 187.5px;
 width: 187.5px;
 top: -15px;
 left: -15px;
}

.item-circled:hover .dashed-border {
 animation-duration: 0.05s;
 animation-timing-function: linear;
 animation-name: spiner;
 animation-iteration-count: infinite;
}

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<div class="item-circled">
  <div class="face-container center-block text-center">
   <div class="face-card">
     <!-- Front side -->
    <div class="face-1 front">
     <p>front</p>
   </div>
      <!-- Back side -->
    <div class="face-1 back">
    <p>back</p>
   </div>
  </div>
    <!-- Spinner element -->
  <div class="dashed-border"></div>
 </div> <!-- face-conteiner -->
</div> <!-- item-circled -->

Anything over 0.1s causes the weird left to right motion that you described

Or I found that if you slow it down enough it also works (the snippet below is set to 3.5s)

.item-circled {
 position: relative;
 width: 157.5px;
 margin: 5% 40px;
 display: inline-block;
}

.item-circled .face-container {
 position: relative;
 width: 157.5px;
 height: 157.5px;
 z-index: 1;
 perspective: 1000px;
}

.item-circled .face-card {
 width: 100%;
 height: 100%;
 transform-style: preserve-3d;
 border-radius: 50%;
 transition: all .5s linear;
}

.item-circled .face-container:hover .face-card {
 transform: rotateY(180deg);
 border-radius: 50%;
}

.item-circled .face-1 {
 position: absolute;
 width: 100%;
 height: 100%;
 backface-visibility: hidden;
 overflow: hidden;
 border-radius: 50%;
}

.item-circled .face-1.front{
  background-color: #f7eebe;
  width: 100%;
  height: 100%
}

.item-circled .face-1.back {
 display: block;
 box-sizing: border-box;
 padding: 35px 13px;
 text-align: center;
 background-color: #1f4e79;
 transform: rotateY(180deg);
 border-radius: 50%;
}

.item-circled .dashed-border {
 position: absolute;
 border-radius: 50%;
 border: 2px dashed #18d9ec;
 height: 187.5px;
 width: 187.5px;
 top: -15px;
 left: -15px;
}

.item-circled:hover .dashed-border {
 animation-duration: 3.5s;
 animation-timing-function: linear;
 animation-name: spiner;
 animation-iteration-count: infinite;
}

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<div class="item-circled">
  <div class="face-container center-block text-center">
   <div class="face-card">
     <!-- Front side -->
    <div class="face-1 front">
     <p>front</p>
   </div>
      <!-- Back side -->
    <div class="face-1 back">
    <p>back</p>
   </div>
  </div>
    <!-- Spinner element -->
  <div class="dashed-border"></div>
 </div> <!-- face-conteiner -->
</div> <!-- item-circled -->

Why the spinner is moving strangely?

2 Answers2