CODEWITHSUNDEEP
csscss-transitions
Stephen Collins
Stephen Collins

Reputation: 3653

Simple CSS transition does not execute

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.

Upvotes: 5

Views: 77

Answers (2)

Chris Laarman
Chris Laarman

Reputation: 1597

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/

Upvotes: 3

Ry-
Ry-

Reputation: 225095

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

Upvotes: 3

Related Questions