Simple CSS transition does not execute

Question

Demo

<a href="#">hover</a>
<p>Text here</p>

I want the <p> to fade in and slide in when the <a> is hovered. Problem is, with the CSS in the demo, the <p> just "pops" in rather than animating.

Answer 1

The transition shorthand doesn’t support multiple properties in the same place:

transition: max-height .5s ease, opacity .5s ease;

You also need overflow: hidden to make it look like it’s sliding. Updated demo

Answer 2

You need to comma seperate the properties you want to transition:

p {
    opacity: 0;
    max-height: 0;
    transition: max-height .5s ease, opacity .5s ease;    
}

http://jsfiddle.net/pZngX/