Sorry for the lack of information, I for some reason assummed that applying rotate in css3 would animate for me, dont know where a got that notion from!
Ive got a job converting a questionaire built in flash to a CSS3/jQuery site because the company wants to make their product available on mobile. The one thing i was having trouble with is the rotating animation of the sign in the bottom left hand corner of the screen. I found a way to use a separate class to store the animation and add it when instructed.
jQuery
$("#signpost").animate({
"left":48,
"bottom":-16
});
$("#signpost").addClass("animaterotation");
CSS
#signpost {
background: url("../imgs/signpost.png");
background-size:cover ;
width:213px ;
height:232px ;
position:absolute;
left:-213px ;
bottom:-4em ;
z-index:999999 ;
cursor:pointer ;
}
.animaterotation {
-webkit-animation-name: rotate;
-webkit-animation-duration: 0.35s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes rotate {
from {
transform-origin:0% 80%;
-ms-transform-origin:0% 80%; /* IE 9 */
-webkit-transform-origin:0% 80%; /* Safari and Chrome */
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
to {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
here's a link to the original:
http://www.bigambition.co.uk/games/dream-job/
here's a link to what I've built:
http://scm.ulster.ac.uk/~B00595392/dreamjobs/
Again, Sorry for the bad communication,
Finbar