Javascript 关键帧动画延迟

我想延迟关键帧动画，但它不起作用。 这是一个div，单击按钮上有一个不透明度动画。问题是，在动画开始之前，不透明度为100%

$（“按钮”）。单击（函数（）{
if（$（this）.hasClass（“单击”））{
$（'div'）.removeClass（'In'）；
$（'div'）.addClass（'Out'）；
$（此）.text（“打开↓");
$（此）.removeClass（“单击”）；
}否则{
$（'div'）.addClass（'In'）；
$（'div'）.removeClass（'Out'）；
$（此）.text（“关闭↑");
$（此）.addClass（“单击”）；
}
})；

正文{
文本对齐：居中
}
div{
显示：内联块；
背景：粉红色；
高度：300px；
宽度：300px；
不透明度：0；
}
钮扣{
字体大小：16px；
}
@中的关键帧{
0% {
不透明度：0；
身高：0
}
100% {
不透明度：1；
高度：300px
}
}
@关键帧输出{
0% {
不透明度：1；
高度：300px
}
100% {
不透明度：0；
身高：0
}
}
.在{
动画持续时间：800ms；
动画名称：In；
动画延迟：0.3s；
不透明度：1；
}
.出去{
动画持续时间：800ms；
动画名称：Out；
动画延迟：0.3s；
不透明度：0；
}

打开↓  

使用过渡而不是动画，您还将获得更简单的代码：

$（“按钮”）。单击（函数（）{
if（$（this）.hasClass（“单击”））{
$（此）.text（“打开↓");
}否则{
$（此）.text（“关闭↑");
}
$（'div.box'）.toggleClass（'In'）；
$（this.toggleClass（“单击”）；
})；

正文{
文本对齐：居中
}
分区箱{
显示：内联块；
背景：粉红色；
身高：0；
宽度：300px；
不透明度：0；
过渡：.8s.3s；
}
钮扣{
字体大小：16px；
}
分区{
不透明度：1；
高度：300px
}

打开↓