Loading image with css transform + PhoneGap problem

Loading image with css transform + PhoneGap problem

Hey guys!

I'm currently working on a android loading image, this one:


Well, i'm going to use this in my phonegap app and i ran into a problem.
In browser it works great! but when i load it in my phonegapp app it doesn't move.

Well i hope you guys have a solution for me!
Here is the code:

HTML:
  1. <div class="loadingDivHolder" id="eventPage" align="center">
  2.                     <div class="loading">
  3.                         <div class="outer"></div>
  4.                         <div class="inner"></div>
  5.                     </div>
  6.                 </div>
CSS:

  1. .loadingDivHolder {
  2.     background: #F0F0F0;
  3.     width: 100%;
  4.     height: 100%;
  5. }
  6. .loading {
  7.     position: relative;
  8.     width: 96px;
  9.     height: 96px;
  10. }
  11. .outer, .inner{
  12.     position: absolute;
  13.     left: 0;
  14.     top: 0;
  15.     right: 0;
  16.     bottom: 0;
  17.     animation-duration: 5s;
  18.     -webkit-animation-duration: 5s;
  19.     -moz-animation-duration: 5s;
  20.     animation-iteration-count: infinite;
  21.     -webkit-animation-iteration-count: infinite;
  22.     -moz-animation-iteration-count: infinite;
  23.     animation-timing-function: linear;
  24.     -webkit-animation-timing-function: linear;
  25.     -moz-animation-timing-function: linear;
  26. }
  27. .outer {
  28.     background: url('../images/outerHolo.png');
  29.     animation-name: rotate-outer;
  30.     -webkit-animation-name: rotate-outer;
  31.     -moz-animation-name: rotate-outer;
  32. }
  33. .inner {
  34.     background:  url('../images/innerHolo.png');
  35.     animation-name: rotate-inner;
  36.     -webkit-animation-name: rotate-inner;
  37.     -moz-animation-name: rotate-inner;
  38. }
  39. @keyframes rotate-outer {
  40.     from {
  41.         transform: rotate(0deg);
  42.         -moz-transform: rotate(0deg);
  43.         -webkit-transform: rotate(0deg);
  44.     }
  45.     to {
  46.         transform: rotate(1080deg);
  47.         -moz-transform: rotate(1080deg);
  48.         -webkit-transform: rotate(1080deg);
  49.     }
  50. @keyframes rotate-inner {
  51.     from {
  52.         transform: rotate(720deg);
  53.         -moz-transform: rotate(720deg);
  54.         -webkit-transform: rotate(720deg);
  55.     }
  56.     to {
  57.         transform: rotate(0deg);
  58.         -moz-transform: rotate(0deg);
  59.         -webkit-transform: rotate(0deg);
  60.     }
  61. }