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

i have been experimenting , trying have not been able achieve following. i'm sure solution simple, haven't hit yet.

let's want animate element (eg. div) when apply class (eg. active). , want reverse animation when remove class (or toggle another).

the properties animate scale (transform) , opacity.

also, when entering page, element not have class, , should snap state, , not animate. should animate when explicitely adding or removing class.

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

html:

<div id="the-div"></div> <a href="javascript:void(0)" onclick="trigger();">trigger</a> 

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

you missing transition property on div selector:

running demo

code added:

#the-div{     transition: 2s; }