Understanding CSS3 Animations - Part 2

Here is little snippet for your help:

JQuery - CSS3 Animation:

$('#cardText').addClass('initialize');

$("#btnTest").bind('click', testCSS);

//alert("After: " + $("#cardText").attr("class"));

function testCSS()

{

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

}

CSS3 Styles:

#cardText{

position: absolute;

height: 100px;

left: 300px;

top: 120px;

background-color:red;

color:white;

font-weight:800;

}

.initialize {width: 400px;-webkit-transition: width 2s linear;}

.sizeOutCard {width: 400px; -webkit-transition: width 2s linear;}

.sizeInCard {width: 0px; -webkit-transition: width 10s linear;}

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.