CODEWITHSUNDEEP
jquerycsscss-transitions
A. Wolff
A. Wolff

Reputation: 74420

Translate jquery animate to CSS3

List of plugin im trying to use:

Basically, im trying to convert some jquery animation to 'pure CSS3 transition'.

This is the code im working on:

$(this).animate({
                    bottom:(docHeight-80),      
                },600,
                'easeOutElastic',
                function(){
                    $(this).animate({
                        bottom:(docHeight-140),      
                    },800);

                }
            );

With that, which is working just fine (see http://jsfiddle.net/5dfCz/), i would like now to use corresponding transition in CSS3 as this kind of animation is quite CPU expensive.

So, ive tried to use animate-enhanced plugin. This works except using CSS3, bottom property of my absolute div is not keeped when animation/transition is completed. You can see a jsfiddle here: http://jsfiddle.net/2p8Gu/

Trying to fix div position after animation gives me weird effect, see there: http://jsfiddle.net/cAUt7/

Also, i've read enhanced plugin doc and play with options 'avoidTransforms', 'useTranslate3d' and 'leaveTransforms' without more success.

So, my question:

How could i do this kind of animation in CSS3?

PS: Easing effect no more work too when convert to CSS3, but i dont know actually if this kind of effect is supported by CSS3 or how to do it.

Upvotes: 0

Views: 971

Answers (1)

Aquarelle
Aquarelle

Reputation: 9138

You can actually do it using CSS3 with less code. The only Javascript you'll need is one line to add a CSS class to an element. The CSS class will contain the CSS3 transition properties needed to perform your animation.

Example (makes the element grow 1.5 times in size):

.someElement {
  -webkit-transition: .5s all linear; // animate all animatable CSS property changes
  -webkit-transform: scale(1);
}
.someElement.enlarged {
  -webkit-transform: scale(1.5);
}

And then just do this in your JS:

$(".someElement").addClass("enlarged"); // make it big
$(".someElement").removeClass("enlarged"); // make it normal size again

Et voila. You can animate opacity, dimensions, position, padding, margins, color (font, background, etc.), and tons of other stuff. Most, but not all, properties support being animated. Check the specs and your local browser vendor to see which ones are animatable.

Upvotes: 1

Related Questions