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

Question

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:
<div id="the-div"></div>
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;
}

Answer 1

You are missing a transition property on the div selector:
running demo
code added:
#the-div{
transition: all 2s;
}

Answer 2

This is an example of a code to toggle class for changing size of a div with the transition-animation.
The HTML:
input-button with id="setRemoveClassBtn"
a div-tag with id="div1"
You will need a CSS-class-definition (notice that this is with the moz-prefix made to work in Firefox):
div{
width: 150px;
height: 150px;
background-color: rgb(250, 250, 150);
-moz-transition: width 5s, height 5s;
}
div.bigSizeDivs{
width: 250px;
height: 250px;
}
You will have to use javascript/jQuery to add/remove class. Here is an example with jQuery
$("#setRemoveClassBtn").click(function(){
$("#div1").toggleClass("bigSizeDivs");
});