css3中animation中使用opacity或display的遇到的问题

在开发中碰到要使用animation来实现淡入淡出的效果，使用opacity，opacity:0的时候，其实它还是占页面空间的，他会遮挡到它下面的层（不是视觉上）。而且绑定在它本身的一些事件也会触发。 这时候想在opacity:0的时候，用display: none把他隐藏掉，但是会发现淡入淡出的效果全没了

解决方法：

display: block;
display: none;

改用：

visibility:visible  
visibility:hidden

visibility 属性介绍：https://www.w3school.com.cn/cssref/pr_class_visibility.asp

扩展：https://www.cnblogs.com/xiaohuochai/p/5296829.html