CSS transitions blocking each other

Question

The following example explains my problem: Link: http://jsfiddle.net/sTFT3/1/

HTML

<div class="parent"> <img src="http://farm8.staticflickr.com/7292/9388249554_18f230a0ce_z.jpg" class="image"/> <img src="http://farm3.staticflickr.com/2814/9389265805_1fd4040203_z.jpg"/> <span class="text">Lorem Ipsum</span> </div> 

CSS

 .parent { position: relative } .parent .text { position: absolute; top: 0; left: 0; background: #ccc; width: 80%; max-height: 0; overflow: hidden; -webkit-transition : max-height 1s linear 0s; -moz-transition : max-height 1s linear 0s; -ms-transition : max-height 1s linear 0s; -o-transition : max-height 1s linear 0s; transition : max-height 1s linear 0s; } .image { position: absolute; opacity: 0; -webkit-transition : opacity 1s ease-in 0s; -moz-transition : opacity 1s ease-in 0s; -ms-transition : opacity 1s ease-in 0s; -o-transition : opacity 1s ease-in 0s; transition : opacity 1s ease-in 0s; } .parent:hover .text { max-height: 600px; } .parent:hover .image { opacity: 1; } 

I need animations to start together, but they are waiting for each other. Could not find anyone else with such a problem.

Answer 1

They start at the same time, but since you have a maximum height of 600px in the top div, it ends faster. Change this to a lower value and they will be animated at the same time and duration

http://jsfiddle.net/sTFT3/2/

The problem is that if you set the maximum height to 600 and the div is only 20 px, this will significantly increase the animation, because it will increase to a height of 600 pixels in 1 second instead of 20px.