CSS3 Transition

transition height

toggle

css

#ex1 {
	transition: height .5s ease-out 0s;
	-webkit-transition: height .5s ease-out 0s;
}
#ex1.transition1 {
	height:100px;
}

javascript

function ex1_execute() {
	var box1 = $("#ex1");
	if (box1.hasClass("transition1")) {
		box1.removeClass("transition1");
	} else {
		box1.addClass("transition1");
	}
}

transition opacity

toggle

css

#ex2 {
	opacity:0;
	transform:translate(0, 20px) scale(1.03);
	-webkit-transform:translate(0, 40px) scale(1.03);
	transition: transform .2s ease-in-out 0s, opacity .2s ease-in-out 0s;
	-webkit-transition: transform .2s ease-in-out 0s, opacity .2s ease-in-out 0s;
}
#ex2.transition1 {

	transform:translate(0, 0) scale(1);
	-webkit-transform:translate(0, 0) scale(1);
	opacity: 1.0;
}

js

function ex2_execute() {
	var box1 = $("#ex2");
	if (box1.hasClass("transition1")) {
		box1.removeClass("transition1");
	} else {
		box1.addClass("transition1");
	}
}