CSS过渡相互阻塞

Question

以下举例说明我的问题： 链接：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; 
} 

我需要的动画开始在一起，但他们正在等待对方。找不到任何其他人遇到这种问题。

Answer 1

它们在同一时间开始，但由于顶部div上的最大高度为600px，因此速度更快。更改为较低的价值，他们将在同一时间和持续时间动画

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

的问题是，如果你设置的600最大高度，而格只有20像素的大，会增加动画剧烈，因为它会在1秒内生成600px的高度，而不是20px。