CSS3 显示变化时触发的动画

Question

我正在尝试使用 CSS3 动画来淡入页面加载中的元素。为此，我需要将元素设置为 display: none;，然后返回到 display: block;。

我只想在元素的初始加载时使用 CSS3 动画，而不是通过显示。如果不跟踪动画已完成 JavaScript，这是否可能？我这里有一个 JS Fiddle 例子 https://jsfiddle.net/L219ezkd/1/

Answer 1

将所有内容包装在一个容器中，然后使用 css 淡入淡出，然后像您现在所做的那样显示和隐藏您的元素：

<div class="container">
  <div id="hover-hide" class="fade fade-in" style="width: 100px; height: 100px; background:blue; display:block; position: absolute; top:0; left:0">  </div>
  <div id="hover-show" style="width: 100px; height: 100px; background:red; display:none; position: absolute; top:0; left:0"></div>
</div>

updated fiddle

Answer 2

您可以保持标记不变，改用 visibility 属性。在 .hover-hide 元素上，在 hidden 和 visible 之间切换。

Updated fiddle.

（这是有效的，因为元素是绝对定位的。如果不是，visibility: hidden; 将不会产生所需的行为，因为它维护元素使用的 space 并简单地隐藏它而不是完全删除它，如 display: none;。）

CSS3 显示变化时触发的动画

CSS3 Animations being triggered on display change

css

animation

css-transitions