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

Answer 1

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 -->

Answer 2

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 -->