CSS3 Transition Animations

Remember, "transition" is what you use to define animated CSS properties without establishing @keyframs and stuff.

by Admiral Potato

HTML

<div id="a" class="animate clickable">A</div>
<div id="b" class="animate clickable">B</div>

CSS

.animate{
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}

.clickable{
    display: block;
    width: 64px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    cursor: pointer;
    opacity: 1;
    padding: 0;
    margin: 0 auto;
}
.active{
    opacity: 0.5;
    padding: 16px;
}

#a{
    background-color: #f00;
}

#a.active{
    background-color: #00f;
    color: #fff;
    font-size: 56px;
}

#b{
    background-color: #0f0;
}

#b.active{
    color: #fff;
    font-size: 24px;
}

JavaScript

var $doc = $(document),
    clickHandler = function(event){
        $(event.currentTarget).toggleClass('active');
    };

$doc.on('click', '.clickable', clickHandler);