CSS transition animation not displaying

Question

Ello all. Thanks for reading and responding!

I am trying to alter the height over a div on hover to show more content that's cutoff by an overflow:hidden (tried text-overflow ellipsis but that failed miserably.. different task though!) I have the hover property working fine, however I'd like to include a transition animation as just jumping open a div is quite distracting. Alas no such luck.

Can't quite figure out where I'm failing though.

.technique_container{
width: 595px;
height: auto;
}

.techpic {
padding: 15px 0px 5px 10px;
width: 15%;
float: left;
height: 100px;
}
.techpic img {border-radius: 15%; margin-top: 15px;}

.technique {
width: 80%;
margin-left: 110px;
height: 118px;
overflow: hidden;
transition: height 1.0s; /* Animation time */
    -webkit-transition: height 1.0s; /* For Safari */
}

.technique:hover {height: auto;}

Seems like a basic CSS property but something is missing?

Also this is a great resource http://jsfiddle.net/BenedictLewis/K6zCT/ :)

Thanks!

Is that example correct? I don't see an element with class `technique`. — Josh Crozier, Mar 20 '14 at 00:32
That link is to a resource, not the code in question. @JoshCrozier — jczimm, Mar 20 '14 at 00:33
The link is just to a resource I was using as reference :) Does not contain anything of mine or the above content — BR89, Mar 20 '14 at 00:34
@BR89 Well, your problem is that you can't transition an element to a height of `auto`. See this question: http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto — Josh Crozier, Mar 20 '14 at 00:37
@JoshCrozier Gah, that's unfortunate. Thanks for the heads up. Sadly all the heights are variable depending on the amount of content. Some have 3 lines, some have 20. Probably no work around without JQuery then. Thanks for your input! — BR89, Mar 20 '14 at 00:43

score 2 · Answer 1 · answered Mar 20 '14 at 00:53

2

You can't transition to height:auto;. I've had some success transitioning max-height instead (replacing height:auto with max-height:900px; or some number that definitely is greater than the intended height).

answered Mar 20 '14 at 00:53

calvin

481
4
9

If it were just one div that'd be a great work around. Unfortunately I have about 15 of these guys stacked up with varying levels of content. Setting one max-height for all of them would be an eye sore for expanding divs that only have 5 lines of text – BR89 Mar 20 '14 at 00:56
I feel you. jQuery's probably your best bet. [Bootstrap's Collapse Plugin](http://getbootstrap.com/javascript/#collapse) is pretty handy in that case, honestly. (Requires their Transitions plugin too.) – calvin Mar 20 '14 at 01:03

score 1 · Accepted Answer · answered Mar 20 '14 at 00:58

As @BR89 said, you cannot transition an element to a height of auto, but you can transition it to a max-height.

.technique {
    width: 80%;
    margin-left: 110px;
    max-height: defaultHeight;
    overflow: hidden;
    transition: max-height 1.0s; /* Animation time */
    -webkit-transition: max-height 1.0s; /* For Safari */
}

.technique:hover {max-height: someLargeNumber;}

Note: someLargeNumber must exceed .technique's maximum possible height (ie. 9999px)

(http://css3.bradshawenterprises.com/animating_height/)

CSS transition animation not displaying

2 Answers2