Html css3父元素和子元素的顺序动画

如何使子元素的动画在父元素完成其动画后出现，即父div在1秒后淡入，而其子元素在1秒后淡入

我尝试了很多技巧，但都没有效果，子元素和父元素在同一时间仍在衰减

请看这里：

HTML:

---

非常感谢

您正在使用CSS转换，因此您应该指示

转换延迟

，而不是

动画延迟

.parent{
宽度：250px；
高度：250px；
背景：#fff；
边框：1px实心#000；
-webkit盒阴影：0 10px rgba（0,0,0,0.5）；
-moz盒阴影：0 10px rgba（0,0,0,0.5）；
盒影：0.10px rgba（0,0,0,0.5）；
填充：10px；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
-webkit过渡：所有0.5s易入易出；
-moz转换：所有0.5s的易入易出；
过渡：所有0.5s缓进缓出；
-webkit转换延迟：2s；
-moz转换延迟：2s；
过渡延迟：2s；
}
.家长h1{
-webkit过渡：所有0.9都易于输入输出；
-moz转换：所有0.9都易于输入输出；
过渡：所有0.9都易于输入输出；
不透明度：0；
-webkit转换延迟：0；
-moz转换延迟：0；
过渡延迟：0；
}
.家长：悬停{
宽度：300px；
高度：300px；
-webkit转换延迟：0；
-moz转换延迟：0；
过渡延迟：0；
}
.父项：悬停h1{
不透明度：1；
-webkit转换延迟：2s；
-moz转换延迟：2s；
过渡延迟：2s；
}

标题在这里

谢谢@MatthewG。相反，当启用“鼠标移动”（mouseleave）时（即，在父元素再次变小之前，子元素应该淡出），情况如何？在这种情况下，您还需要指示非悬停状态的转换延迟。所以，确保你颠倒哪个没有延迟，哪个有延迟。看我的答案，我已经更新了它，给你这个例子。

<div class="parent">
    <h1>The Title Here</h1>
</div>

.parent {
    width: 250px;
    height: 250px;
    background: #fff;
    border: 1px solid #000;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.parent h1 {
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
    opacity: 0;
}

.parent:hover {
    width: 300px;
    height: 300px;
}
.parent:hover h1 {
    opacity: 1;
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    animation-delay: 5s;
}