CSS-3 + Jquery Simple animation , onclick.

CSS-3 + Jquery Simple animation , onclick.

hey guys have a look at this fiddle : 

fiddle

now what i am doing in this fiddle is when i click on any li element , i have a data attribute attached to each li element , and the Jquery code basically grabs the perticular li elements data value and displays it in a div , now i'd really like to combine CSS-3 and Jquery togeather . 

with CSS-3 , every time i click on a li , it should have a small animation , I.E the below animation should be activated : 

  1. @keyframes rotate {
  2.     0% {
  3.         transform:rotateX(50deg) translateY(-20px);
  4.         /*transform: translateX(100px);*/
  5.     }
  6.     100% {
  7.         transform:rotateX(0deg) translateX(0px);
  8.     }
  9. }
  10. .animated {
  11.     -webkit-animation-name: rotate;
  12.     -o-animation-name: rotate;
  13.     animation-name: rotate;
  14.     -webkit-animation-duration: 1s;
  15.     -o-animation-duration: 1s;
  16.     animation-duration: 1s;
  17. }
I.E the animation should be activated before the li data can be displayed . 

if somebody can just piont me as to what i'am doing wroung , it would be of great help . 

Thanks . 

Gautam.