在此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
等其他技巧无法满足我的需求。
最佳答案
我不确定您要做什么,如果您想隐藏元素并在动画开始时显示它,请使用这样的可见性属性:
#test {
-webkit-animation: test 2s;
visibility:hidden;
}
@-webkit-keyframes test {
0%{margin:5px}
20%{visibility:visible}
70%{margin:40px}
}
关于css - 如何在CSS3动画中间显示一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16373884/