Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3: Animate opacity and scale by applying class, and animate back by removing class

CSS3: Animate opacity and scale by applying class, and animate back by removing class

Problem

I have been experimenting and trying but have not been able to achieve the following. I'm sure the solution is simple, but I haven't hit it yet.

Let's say I want to Animate an element (eg. div) when I apply a class (eg. active). And I want to reverse the animation when I remove the class (or toggle with another).

The properties I would like animate are scale (transform) and opacity.

Also, when entering the page, the element will not have any class, and should snap to its state, and not animate. It should only animate when explicitely adding or removing the class.

jsfiddle: http://jsfiddle.net/bertvan/9r98w/

HTML:

Trigger

JS:

$(function(){
    $("a").click(function(){
        $("#the-div").toggleClass("active");
    });
});

CSS:

#the-div{
    width: 200px;
    height: 200px;
    background-image: url("http://placeimg.com/200/200/any");
    -webkit-transform: scale(0.7);
    opacity: 0.5;
}

#the-div.active{
    /* animate scale & opacity */
    -webkit-transform: scale(1);
    opacity: 1;
}
Problem courtesy of: Bertvan

Solution

You are missing a transition property on the div selector:

running demo

code added:

#the-div{
    transition: all 2s;
}
Solution courtesy of: Andrea Ligios

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3: Animate opacity and scale by applying class, and animate back by removing class

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×