Newbe Dev Stack

Answer : Fix delay solution: Put cubic-bezier(0, 1, 0, 1) transition function for element. scss .text { overflow: hidden; max-height: 0; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); &.full { max-height: 1000px; transition: max-height 1s ease-in-out; } } css .text { overflow: hidden; max-height: 0; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); } .text.full { max-height: 1000px; transition: max-height 1s ease-in-out; } This is an old question but I just worked out a way to do it and wanted to stick it somewhere so I know where to find it should I need it again :o) So I needed an accordion with clickable "sectionHeading" divs that reveal/hide corresponding "sectionContent" divs. The section content divs have variable heights, which creates a problem as you can't animate height to 100%. I've seen other answers suggesting animating max-height instead but this means sometimes you get delays when th...

Answer : Here's one way to achieve this (put a bogus property none for transition property in :hover ): #inner2{ opacity:0; transition:opacity 2000ms; } #outer:hover #inner2{ opacity:1; transition:none; } http://jsfiddle.net/j716sbav/4/ Answer updated to incorporate @BoltClock's suggestion. Putting none instead of a bogus property is definitely more elegant. If you prefer not to specify the transition property more than once, you can apply the transition to :not(:hover) , but the caveat is that you need to swap all of the other declarations as well: #inner2{ opacity:1; } #outer:not(:hover) #inner2{ opacity:0; transition:opacity 2000ms; } Either of these will work, but if you don't want to deal with confusing inversions, stick with overriding via transition: none . Also note that CSS selectors represent states and not events, which means that it utilizes a :hover state rather than mouseover and mouseout events; however, a tra...