CSS-3 + Jquery Simple animation , onclick.
hey guys have a look at this 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 :
- @keyframes rotate {
- 0% {
- transform:rotateX(50deg) translateY(-20px);
- /*transform: translateX(100px);*/
- }
- 100% {
- transform:rotateX(0deg) translateX(0px);
- }
- }
- .animated {
- -webkit-animation-name: rotate;
- -o-animation-name: rotate;
- animation-name: rotate;
- -webkit-animation-duration: 1s;
- -o-animation-duration: 1s;
- animation-duration: 1s;
- }
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.