CSS3 Animation doesn't work

Question

I am using in my app the IcoMoon App fonts, for symbols.

At some part of my app, I like to use a rotating arrow by using the CSS3 Animation options, but for some reason, this doesn't work for me.

You can see my live code in FiddleJS

As you can see, in the element

<i class="loading icon-progress rotate"></i>

I have implement all the appropriate classes, but the animation does not run. Can somebody to help me ?

Am I doing something wrong ?

NOTE: I also have try the following in my CSS Code

.rotate
{
    ....
}

but still no results

The font I have installed is the following : http://i.icomoon.io/public/temp/9c89e0f9cb/BusinessDirectory/style.css

Answer 1

I've looked at your fiddle and if you remove the top: 0px and left: 0px property in each animation step, the animation works.

This link explains why: Stackoverflow - Multiple properties in keyframe

I've tried that with percentage, em and rem and it seems like positional properties are not wanted in your keyframes.

@keyframes rotationAnimation
{
  0%
  {
    transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
  100%
  {
    transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
}

@-moz-keyframes rotationAnimation
{
  0%
  {
    -moz-transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
  100%
  {
    -moz-transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
}

@-webkit-keyframes rotationAnimation
{
  0%
  {
    -webkit-transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
  100%
  {
    -webkit-transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
}

@-o-keyframes rotationAnimation
{
  0%
  {
    -o-transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
  100%
  {
    -o-transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
}

@-ms-keyframes rotationAnimation
{
  0%
  {
    -ms-transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
  100%
  {
    -ms-transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
}

Above code works - funny thing if you use margin-* properties in one of the keyframes the margin gets animated not the rotate. I've not enough CSS3 expertize to know why :/

edit: Okay I've played a little more aaaand you need to write additional properties into the *-transform like

@-webkit-keyframes rotationAnimation
{
  0%
  {
    -webkit-transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg), left:0,top: 0;
  }
  100%
  {
    -webkit-transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg), left:0, top:0;
  }
}