我#foo隐藏了一个元素，并且需要使用zoomIncss动画（将一个元素从opacity:0转到）进行展示opacity:1。
这是我正在使用的代码：
的CSS
#foo {
opacity: 0;
...
}
// Zoom In animation
@keyframes zoomIn {
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.zoomIn {
animation: zoomIn .2s ease-in-out 0s both;
}
JS
$(document).ready(function() {
$("#foo").addClass("zoomIn");
});
使用上面的代码，我看到了动画，然后该#foo元素再次消失了。它不容纳opacity:1。怎么解决呢？
关于关键帧
为了补充Slugge的职位，我想知道为什么您在结束动画50%。我认为您应该在100%（特别是如果您希望opacity停留在1）处结束它。或者0% {} 100% {}，您可以使用代替from {} to {}。
@keyframes zoomIn {
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
100% {
opacity: 1;
}
}
关于其他解决方案
我认为，只定义一个transition和“活动”类而不是使用Keyframes会更容易。
#foo {
opacity: 0;
transition: opacity 0.2s ease-out;
}
#foo.active {
transform: scale3d(.3, .3, .3);
opacity: 1;
}
然后
$(document).ready(function() {
$("#foo").addClass("active");
});
您可以添加过渡的transform使用，以及transition: opacity 0.2s ease-out, transform 0.2s ease-out;或transition: all 0.2s ease-out;
祝你好运'
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句