views:

39

answers:

0

I'm using CSS3 animations within PhoneGap, an iPhone web-based SDK that enables you to create native apps using the web technology stack.

The particular CSS animation I have below works in Safari, Chrome, and even the iPhone simulator, but for the life of me #image_cat1, #image_cat2, and #image_cat3 are not being displayed on the actual device and I can't find anything on google or anywhere else. What could I possible be doing wrong. Below is the stylesheet:

/** =====================
  * USER INTERFACE STYLE
  * =====================
  */
#title_menu {
    width:960px;
    height:640px;
    float:left;
    position:absolute;
    top:0px;
    left:0px;
    background:url(img/ui/main_menu/background_red.png) no-repeat top left;
    overflow:hidden;
     -webkit-transform: scale(0.5) translate(-480px,-320px); 
}

#title_survivalrat {
    width:576px;
    height:127px;
    position:absolute;

    background:url(img/ui/main_menu/title_survivalrat.png) no-repeat top left;
    z-index:6;

    -webkit-transform: translate(205px, 0px);
    -webkit-animation-name: title_survivalrat;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-transition:ease-in;
}

    @-webkit-keyframes title_survivalrat {
         0% {

            -webkit-transform: translate(205px, -300px);

         }
         50% {

            -webkit-transform: translate(205px, 100px);
         }
         75% {

            -webkit-transform: translate(205px, -50px);
         }
         100% {

            -webkit-transform: translate(205px, -0px);
         }

     }

#button_play {
    width:288px;
    height:117px;
    position:absolute;
    background:url(img/ui/main_menu/button_play.png) no-repeat top left;
    z-index:6;
    -webkit-transform: translate(25px, 495px);
    -webkit-animation-name: button_play;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-transition:ease-in;
}

    @-webkit-keyframes button_play {
         0% {
            -webkit-transform: translate(25px,640px);

         }
         50% {
            -webkit-transform: translate(25px,450px);

         }
         100% {
            -webkit-transform:translate(25px,495px);
         }
     }




#button_settings {
    width:292px;
    height:119px;
    position:absolute;
    background:url(img/ui/main_menu/button_settings.png) no-repeat top left;
    z-index:6;
    -webkit-transform: translate(330px, 470px);
    -webkit-animation-name: button_settings;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-transition:ease-in;
}

    @-webkit-keyframes button_settings {
         0% {
            -webkit-transform: translate(330px,640px);

         }
         50% {
            -webkit-transform: translate(330px,420px);

         }
         100% {
            -webkit-transform: translate(330px,470px);
         }
     }


#button_about {
    width:296px;
    height:117px;
    position:absolute;
    background:url(img/ui/main_menu/button_about.png) no-repeat top left;
    z-index:6;
    -webkit-transform: translate(646px, 445px);
    -webkit-animation-name: button_about;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-transition:ease-in;
}

    @-webkit-keyframes button_about {
         0% {
            -webkit-transform: translate(646px,640px);

         }
         50% {
            -webkit-transform: translate(646px,400px);

         }
         100% {
            -webkit-transform: translate(646px,445px);
         }
     }

#overlay_container {
    width:960px;
    height:640px;
    float:left;
    position:absolute;
    top:0px;
    left:0px;
    background:url(img/ui/main_menu/overlay_container.png) no-repeat top left;
    z-index:5;
}

#image_rat {
    width:277px;
    height:271px;
    position:absolute;
    top:300px;
    left:126px;
    background:url(img/ui/main_menu/image_rat.png) no-repeat top left;
    z-index:5;

}

#image_cat1 {
    width:416px;
    height:533px;
    position:absolute;
    background:url(img/ui/main_Menu/image_cat1.png) no-repeat top left;
    z-index:100;
    -webkit-transform: translate(65px, 104px);
    -webkit-animation-name: image_cat1;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-transition:ease-in;
}

    @-webkit-keyframes image_cat1 {
         0% {
            -webkit-transform: translate(0px,640px);

         }
         100% {
            -webkit-transform: translate(65px,104px);

         }
     }

#image_cat2 {
    width:474px;
    height:558px;
    position:absolute;
    -webkit-transform: translate(296px, 0px);
    background:url(img/ui/main_Menu/image_cat2.png) no-repeat top left;
    z-index:2;
   -webkit-transform: translate(296px, 0px);
    -webkit-animation-name: image_cat2;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-transition:ease-in;
}
    @-webkit-keyframes image_cat2 {
         0% {
            -webkit-transform: translate(296px,640px);

         }
         100% {
            -webkit-transform: translate(296px,0px);

         }
     }
#image_cat3 {
    width:443px;
    height:419px;
    position:absolute;
    background:url(img/ui/main_Menu/image_cat3.png) no-repeat top left;
    z-index:1;
    -webkit-transform: translate(532px, 118px);
    -webkit-animation-name: image_cat3;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-transition:ease-in;
}

    @-webkit-keyframes image_cat3 {
         0% {
            -webkit-transform: translate(732px,740px);

         }
         100% {
            -webkit-transform: translate(532px,118px);

         }
     }

#image_boxes {
    width:960px;
    height:319px;
    position:absolute;
    background:url(img/ui/main_menu/image_boxes.png) no-repeat top left;
    z-index:3;
    -webkit-transform: translate(0px, 343px);
    -webkit-animation-name: image_boxes;

    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-transition:ease-in;
}

    @-webkit-keyframes image_boxes {
         from {
            -webkit-transform: translate(0px,640px);

         }
         to {
            -webkit-transform: translate(0px,343px);

         }
     }