Question

I am trying to create a loader animation using CSS3. Here is the code:

If you look at the code, I've entered the css, in @keyframe defn, for rotating the squares from 0deg to 360deg ( as like below ). But the dices are not rotating. Please help on this and also let me know if you need more details.

@keyframes tilt{
  0%{
    transform: scale($scaleMin) rotate($rotateStart);
  }
  50%{
   transform: scale($scaleMax);
   background: #BC11FF;
   box-shadow: 0 0 2px #D467FF;
  }
  95%,100%{
   transform: scale($scaleMin) rotate($rotateEnd);
   background: #11A8FF;
   box-shadow: none;
  }
}

PS. CSS is written using SCSS in the code sample.

Answer 1

It's missing the rotate() in 50% section.

$rotateMid: 225deg;/*added, adjust the value as needed*/

span {
  animation: tilt #{$animDuration}s linear infinite; /*changed to linear*/
}

50%{
  transform: scale($scaleMax) rotate($rotateMid); /*changed/added*/
}

Updated: http://codepen.io/anon/pen/QbJmbO?editors=110

Differences between the transition timing functions:

ease-in will start the animation slowly, and finish at full speed.

ease-out will start the animation at full speed, then finish slowly.

ease-in-out will start slowly, be fastest at the middle of the animation, then finish slowly.

ease is like ease-in-out, except it starts slightly faster than it ends.

linear uses no easing.

Source: https://stackoverflow.com/a/9636239/483779

Rotate element to 360deg using CSS3 Animation

1 个答案: