How to combine jQuery animate with css3 properties without using css transitions?

animation, css, javascript, jquery, rotatetransform

Solution

It is possible, but it isn't easy.

var red = $(".red"),
    rotateVal = 90;
$("<div />").animate({
    height: rotateVal
},{
    duration: 500,
    step: function(now){
        red.css('transform','rotate('+now+'deg)');
    }
});

This basically creates a fake animation of a detached div, then on each step, updates the rotation of the target div.

Edit: Oops! wrong argument order. Here's a demo. http://jsfiddle.net/qZRdZ/

note that in 1.8.0 i don't think you need to specify all the vendor prefixes.

Using this method, you can animate almost anything as long as you keep in mind that things like `+=` and `-=` won't work properly unless coded for.

Update: Here's a combination of my solution and cuzzea's solution abstracted behind a function. http://jsfiddle.net/qZRdZ/206/

$.fn.rotate = function(start, end, duration) {
    console.log(this);
    var _this = this;
    var fakeDiv = $("<div />");
    _this.promise().done(function(){
        _this.animate({"a":end},{duration:duration});
        fakeDiv.css("height", start).animate({
            height: end
        }, {
            duration: duration,
            step: function(now) {
                _this.css("transform", "rotate(" + now + "deg)");
            },
            complete: function() {
                fakeDiv.remove();
            }
        });
    });

    return _this;
};

var red = $('.red');
red.click(function() {
    if ( !$(this).is(':animated') ) {

        red.rotate(45,135,500);
        setTimeout(function(){
            red.rotate(135,190,500);
        },750);
        setTimeout(function(){
            red.rotate(190,45,500);
        },1500);
    }
});

});

Problem

In this example; i am trying to create a jQuery animation with css3 rotate property. I can manage this animation with css3 `transition` and jQuery `css()` but i want to do this with jQuery `animate()` for rotating deg value according to my jQuery variatons. Is it possible use animate with css3 property value with jQuery 1.8.0? Here is jsFiddle to inspect. jQuery: ``` var rotateVal = 90; //this method isn't working $('.red').animate({ 'transform':'rotate('+rotateVal+'deg)' },500); //this way works but i don't want to do this with transitions $('.black').css({ 'transform':'rotate('+rotateVal+'deg)', 'transition':'1s' });​ ``` html: ``` <span class="black"></span> <span class="red"></span> ``` Edit: Vendor prefixes removed, like `-webkit-`. Thanks to Kevin B.

Original source