如何在CSS3动画中间显示元素

Question

在此示例中 ，我只想在动画的一步中显示该元素。 但是，这是不可能的，因为如果在主CSS规则中设置display:none ，动画将不会覆盖它。

#test {
    -webkit-animation: test 2s;
    display:none; // here is the problem, as the animation does not override it.
}

@-webkit-keyframes test {
    0%{margin:5px}
    20%{display:block}
    70%{margin:40px}
}

请注意，这是一个简化的示例，在实践中，我需要使用display:none隐藏元素，使其在动画中变得可见。 因此，其他opacity技巧不能满足我的需求。

Answer 1

我不确定您要做什么，如果您想隐藏元素并仅在动画开始时显示它，请使用可视性属性，如下所示：

#test {
  -webkit-animation: test 2s;
  visibility:hidden;
 }

@-webkit-keyframes test {
   0%{margin:5px}
  20%{visibility:visible}
  70%{margin:40px}
}

小提琴的例子