Apologies for the lack of details, I mistakenly thought that using rotate in CSS3 would automatically animate, but it turns out that was not the case!
I've been tasked with converting a flash-based questionnaire into a CSS3/jQuery website to cater to mobile users. One challenge I faced was creating a rotating animation for the sign in the bottom left corner of the screen. After some trial and error, I managed to achieve this by utilizing a separate class for the animation and adding it when needed.
For the jQuery part:
$("#signpost").animate({
"left":48,
"bottom":-16
});
$("#signpost").addClass("animaterotation");
And for the CSS part:
#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);
}
}
Original link:
My version link:
Once again, my apologies for the confusion,
Finbar