Rotate element to 360deg using CSS3 Animation

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.

Probably the addition of `rotate($rotateMid)` inside the `50%` keyframe block will help you? — Tahir Ahmed, Jul 29 '15 at 03:39
Nope. Adding 'rotate()' at 50% causes a pause of the animation in the middle for fraction of seconds. — obuliraj, Jul 29 '15 at 05:45
that _pause_ is thanks to the `ease-out`. if you can set it to `linear` and set your `$rotateMid` to `180deg` and apply this `$rotateMid` to the `50%` block, this may produce the result you are looking for. — Tahir Ahmed, Jul 29 '15 at 06:52
yeah, as @TahirAhmed said, use linear animation: tilt #{$animDuration}s linear infinite; — Gigi Ionel, Jul 29 '15 at 14:29

score 1 · Accepted Answer · edited May 23 '17 at 11:58

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

edited May 23 '17 at 11:58

Community

1
1

answered Jul 28 '15 at 16:31

Stickers

75,527
23
147
186

Here is what I wanted achieve, http://codepen.io/raaj-obuli/pen/RPeLer?editors=110. But observe there is a pause at 50%-th keyframe which I don't want. I just need a smooth rotation. – obuliraj Jul 29 '15 at 05:48
If you don't mind, I just wanna ask you another query here related @keyframe. As per MDN doc (https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes), any left out property in between the keyframes would be interpolated (unless not defined in first & last keyframes). I am just wondering, why the rotate() property value in 50% is not interpolated here ? – obuliraj Jul 29 '15 at 16:43
I think the problem is your previous keyframe setting is *invalid*, it's not about *interpolated*. – Stickers Jul 29 '15 at 18:36

Rotate element to 360deg using CSS3 Animation

1 Answers1