CODEWITHSUNDEEP
csscss-animations
user3196599
user3196599

Reputation:

Rotate an element on the Y axis

I setup a simple keyframe animation to rotate an element on the Y axis but it is choppy, am I missing a property?

.circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 5px solid black;
  margin: auto;
  animation: rotateY 1s infinite;
}
@-webkit-keyframes rotateY {
  0% { transform: rotateY( 60deg); }
  20% { transform: rotateY( 120deg); }
  40% { transform: rotateY( 180deg); }
  60% { transform: rotateY( 240deg); }
  80% { transform: rotateY( 300deg); }
  100% { transform: rotateY( 360deg); }
}
<div class="circle"></div>

Upvotes: 12

Views: 9732

Answers (2)

web-tiki
web-tiki

Reputation: 103810

The "choppy" effect is created because of the default animation-timing-function (ease), you should set it to linear.

Also there is no point in specifying states at 20%, 40%... for the keyframe animation, you can just specify the end state with the "to" keyword :

.circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 5px solid black;
  margin: auto;
  animation: rotateY 1s infinite linear;
}
@keyframes rotateY {
  to { transform: rotateY(360deg); }
}
<div class="circle"></div>

Note that you also need to use vendor prefixes depending on the browsers you want to support. See canIuse for more info.

Upvotes: 17

Rich Bradshaw
Rich Bradshaw

Reputation: 73055

Did you mean it to be like this?

.circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 5px solid black;
  margin: auto;
  animation: rotateY 1s infinite;
  animation-timing-function: linear;
}
@-webkit-keyframes rotateY {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
<div class="circle"></div>

The changes there are to add a timing function that's linear (rather than an ease), and to make the animation a little clearer as to what's going on.

Upvotes: 2

Related Questions