How to Combine Jquery Animate with CSS3 Properties Without Using CSS Transitions

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

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

});

Triggering CSS3 animation with JQuery hover not working

You're missing the animation-duration:

.bounce {    
    // this is the shorthand definition
    -webkit-animation: bounce 1s ease infinite;
    -moz-animation: bounce 1s ease infinite;
    -o-animation: bounce 1s ease infinite;
    animation: bounce 1s ease infinite;
}

http://jsfiddle.net/fyTpV/2/

Using Modernizr and jQuery to Animate if CSS3 Transitions Don't Exist

Solved this myself. The way I did was like this

<!doctype html>
<html>
    <head>
        <title>Modernizr + jQuery Testing</title>
        <script type="text/javascript" src="modernizr.js"></script>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
        if(!Modernizr.csstransitions) { // Test if CSS transitions are supported
            $(function() {
                $('#js').hover(function(){
                    $(this).animate({width:'50px',height:'50px'},{queue:false,duration:500});
                }, function(){
                    $(this).animate({width:'100px',height:'100px'},{queue:false,duration:500});
                });
            });
        }
        </script>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }
            div {
                border: 1px solid red;
                height: 100px;
                margin: 25px auto;
                width: 100px;
            }
            #css {
                transition: height .5s, width .5s;
                -khtml-transition: height .5s, width .5s;
                -moz-transition: height .5s, width .5s;
                -o-transition: height .5s, width .5s;
                -webkit-transition: height .5s, width .5s;
            }
            #css:hover {
                height: 50px;
                width: 50px;
            }
        </style>
    </head>

    <body>
        <div id="js">
            JS
        </div>
        <div id="css">
            CSS
        </div>
    </body>
</html>

That worked perfectly. The CSS one only animates in new browsers (because that's the only place it can) and the JS one only animates in old browsers. If you use this script, you can get modernizr from http://www.modernizr.com/ and jQuery from http://www.jquery.com/ (of course).

Can I convert with jQuery animation to CSS3 transitions/transformations with javascript fallback?

First of all - you will only need transitions for what you are doing. Animations are not supported as widely and anything you do with jQuery's animate() can be done with a transition (except very certain types of transitions such as elastic or bounce transitions).

I would add the transition to my CSS and then use modernizr to do feature detection in javascript.

For example my CSS might look like this (it's not exactly what you are trying to do but an example):

#lightbox {
  opacity: 0;
  width: 100%;
  height: 100%;
  left: -50%;
  top: -50%;

    -ms-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;

  -webkit-transform: translateZ(0);
}

#lightbox.active {
  left: 0;
  top: 0;
  opacity: 1;
}

So now the default hidden state can get toggled on or off by using addClass("active"). In browsers that support CSS3 transitions this will now occur! AND for browsers without support for CSS3 transitions the element with the ID of lightbox would just appear or disappear without an animation. Also note that I added a webkit translateZ property. This is a trick to get GPU acceleration on your CSS3 transitions in Safari and Chrome. It makes a huge difference in performance, especially on iOS devices.

OK - so now how do we fallback to jquery.animate for browsers that don't support CSS3 transitions? This is where modernizr comes into play. Let's say the user clicked the close button and you now want the lightbox to fade out. You would remove the "active" class for browsers with CSS3 transitions OR use the jquery.animate method for browsers that don't support transitions:

if(Modernizr.csstransitions){
  $("#lightbox").removeClass("active");
} else {
  $("#lightbox").animate({...});
}

For more info on the property see: http://www.modernizr.com/docs/#csstransitions

Combination of animation and transition not working properly

This is sort of a known behavior with Chrome. Firefox does seem to be able to handle the removal of animation smoothly with transition but Chrome doesn't do so. I had seen this behavior happen earlier also in this thread.

Why does removal of an animation not work with transition in Chrome?

While I cannot provide a 100% fool-proof explanation of why this happens, we can decode it to some extent based on this HTML5Rocks article about Accelerated rendering in Chrome and this one about GPU accelerated compositing in Chrome.

What seems to happen is that the element gets its own rendering layer because it has explicit position property set on it. When a layer (or part of it) gets invalidated due to animation, Chrome only repaints that layer which is affected by the change. When you open the Chrome Developer Console, switch on "Show Paint Rects" option, you would see that when the animation is happening Chrome only paints the actual element that is getting animated.

However, at the start and end of animation a whole page repaint is happening which puts the element back into its original position immediately and thus overriding the transition behavior.

$('button').click(function(){  $('div').toggleClass('clicked');});

div{  background-color: #ccc;  height: 100px;  width: 100px;  transition-property: top, left;  transition-duration: 1s;  transition-timing-function: linear;  position: relative;  top: 0;  left: 0;}.clicked{  animation-name: clicked;  animation-duration: 1s;  animation-timing-function: linear;  animation-fill-mode: forwards;}@keyframes clicked{  0% {top: 0; left: 0;}  100% {top: 100px; left: 100px;}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button type="button">Click Me!</button><div></div>

CSS3 rotateY without transitions applied

If you are trying to rotate an object without a transition, then you should not be setting a transition at all. Only set the transform:

$(this).css('-webkit-transform','rotateY(180deg)');

$(this).css('-webkit-transform','rotateY(0)');

Live example to show no transition when rotated: http://jsfiddle.net/2XU7D/4/

Skipping to end of CSS3 transition

You can "stop" the animation by adding a class before starting the original animation and then removing it when you want to stop it:

Demo: http://jsfiddle.net/SO_AMK/LXqcz/2/

CSS:

#block {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #ff0000;
}

.animate {
    transition: left 2s;
    -moz-transition: left 2s;
    -webkit-transition: left 2s;
    -o-transition: left 2s;
    -ms-transition: left 2s;
}

jQuery:

$("#block").on("click", function() {
    $(this).addClass("animate").css("left", "300px");

    $(this).off("click");
    $(this).on("click", function() {
        $(this).removeClass("animate");
    });
});

Note: I simplified code for the demo, complete "fixed" code is here: http://jsfiddle.net/SO_AMK/LXqcz/

jQuery animate() and CSS transition happening separately on same event

Ok, so in all honesty I was tinkering. Remove the duration time (2000) from the animations in your jquery. Looks like the transition on the css handles the duration.

div.hover(
    function() {
        $(this).animate({
            marginTop: "-=50",
            marginLeft: "-=50"
        });
    },
    function() {
        $(this).animate({
            marginTop: "+=50",
            marginLeft: "+=50"
        });
    }
);

http://jsfiddle.net/sp2ufh4o/1/

How to Combine Jquery Animate with CSS3 Properties Without Using CSS Transitions