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);
}
}