Having a bit of trouble with my CSS class:
.rotate
{
-webkit-transition: all 2s ease-in-out;
-webkit-transform : rotateY(360deg);
}
When I change the rotation to 180deg and apply the class using jQuery, the div rotates instantly instead of over a 2 second period. It seems like the transition effect is not being applied, only the transform.
Any suggestions on how to fix this?
Thanks in advance!
- JD
Additional Info:
After some testing, it appears that applying the class works properly when triggered by a click event.
I'm using a plugin that handles animations, where users can specify their own animations at the start. The plugin stores a list of div elements in an array and cycles through them every 5 seconds by inserting each one into the DOM tree (and removing the existing one). I expected the transition to occur when the first div is added. Here's how I'm using the plugin:
$.jqTests.start({ cyclespeed : 5secs;
transitionanimationin :
function(element) {
element.removeClass('non-active');
// display : none is removed.
element.addClass('rotate');}
});
I've noticed that using CSS3 keyframe animations work correctly, but I'm unable to get the transition to work effectively using transforms.