Question

I created a JSFiddle to show my problem.

http://jsfiddle.net/sqMT6/1/

When you click a paragraph, the ‘hidden’ class is set, so a webkit animation should be played, the paragraph should disappear in 5 seconds.

The class is set, and the animation is not played.

I must have missed something very simple.

Can anyone please point it out?

Thanks

Answer 1

Try removing the colons before from/to attributes in the @keyframe rule.

Original CSS

@-webkit-keyframes appear{
    from:{opacity: 0;}
    to: {opacity: 1;}
}

@-webkit-keyframes disappear{
    from:{opacity: 1;}
    to: {opacity: 0;}
}​

Fixed CSS

@-webkit-keyframes appear{
    from {opacity: 0;}
    to {opacity: 1;}
}

@-webkit-keyframes disappear{
    from {opacity: 1;}
    to  {opacity: 0;}
}​ 

Example: http://jsfiddle.net/sqMT6/3/