如何在 CSS3 动画中间显示一个元素答案

【问题标题】：How to display an element in the middle of CSS3 animation如何在 CSS3 动画中间显示一个元素
【发布时间】：2013-04-28 17:46:56
【问题描述】：

在这个example 中，我想在动画的一个步骤中显示元素。但是，这是不可能的，因为如果我在 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 等其他技巧无法满足我的需求。

【问题讨论】：

标签： css animation css-transitions keyframe css-animations

【解决方案1】：

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

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

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

fiddle example

【讨论】：