Understanding CSS3 Animations

Every Animation has two states:

1) From/Source State

2) To/Target State

Define two CSS classes:

1) Source CSS Class - .source{ width: 400px; opacity:0; -webkit-transition: width 2s linear;}

2) Target CSS Class - .target{ width: 400px; opacity:1; -webkit-transition: opacity 2s linear;}

3) Initialize CSS Class - .init{ width: 0px; opacity:0;}

Transitions defined in the Target Style Class is used when we change the Style Class.

Finally to animate use JQuery to change the CSS

$('#cardText').toggleClass('target');

NOTE:

1) Never use the attribute you want to animate in the element CSS - otherwise it get's fixed and you don't see any animation.