带有延迟的纯 CSS 动画可见性

Question

我正在尝试在没有 Javascript 的情况下实现一些 onLoad 动画 。 JS很简单，CSS是...不是。

我有一个 div，它应该在 display: none; 上，3 秒后应该是 display: block;。很多资源告诉我 animate 不适用于 display，但应该与 visibility（我在过渡中经常使用）一起使用。

知道我有这个可怕的 javascript 功能 :

<script type="text/javascript"> $(document).ready(function(){ $(".js_only").hide(); setTimeout(function () { $(".js_only").show(); }, 3000); }); </script>

我在 CSS 中尝试了一些动画，但没有结果...似乎没有任何效果。

我的页面中几乎没有动画，但只是在努力处理 display: none; 动画。

@-moz-keyframes showEffect { 0% { display: none; visibility: hidden; } 100% { display: block; visibility: block; } } @-webkit-keyframes showEffect { 0% { display: none; visibility: hidden; } 100% { display: block; visibility: block; } } @keyframes showEffect { 0% { display: none; visibility: hidden; } 100% { display: block; visibility: block; } } .css_only { -moz-animation-name: showEffect; -moz-animation-iteration-count: 1; -moz-animation-timing-function: ease-in; -moz-animation-duration: 2.3s; -webkit-animation-name: showEffect; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-in; -webkit-animation-duration: 2.3s; animation-name: showEffect; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: 2.3s; }

作为隐藏很重要，这个元素根本不需要space。 I created a JSFiddle 进行相当的测试。

我主要关心的是 SEO ...我不认为 JS 选项真的很好，这就是为什么我想要一个纯粹的 CSS 替代方案。也有兴趣测试这些动画并查看这些限制在哪里（我现在看到一个了吗？）。有点喜欢这样的挑战。

感谢阅读，希望有人能解答。

Answer 1

您不能为每个属性、

制作动画

here's 对动画属性的引用

可见性是可动画的，而显示不是...

在你的情况下，你还可以根据你想要渲染的效果类型对 opacity 或 height 进行动画处理_

fiddle with opacity animation

Answer 2

您认为 display 不可设置动画是正确的。它不会起作用，您不应该费心将它包含在关键帧动画中。

visibility 在技术上是可以动画化的，但是是以一种迂回的方式。您需要根据需要按住属性，然后捕捉到新值。 visibility 不在关键帧之间进行补间，它只是步履蹒跚。

.ele {
  width: 60px;
  height: 60px;
  
  background-color: #ff6699;
  animation: 1s fadeIn;
  animation-fill-mode: forwards;
  
  visibility: hidden;
}

.ele:hover {
  background-color: #123;
}

@keyframes fadeIn {
  99% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

<div class="ele"></div>

想淡化就用opacity。如果包含延迟，您还需要 visibility，以阻止用户在元素不可见时与该元素交互。

.ele {
  width: 60px;
  height: 60px;
  
  background-color: #ff6699;
  animation: 1s fadeIn;
  animation-fill-mode: forwards;
  
  visibility: hidden;
}

.ele:hover {
  background-color: #123;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}

<div class="ele"></div>

两个示例都使用 animation-fill-mode，它可以在动画结束后保持元素的视觉状态。

Answer 3

很遗憾，您无法为 display 属性设置动画。如需动画的完整列表，请尝试 w3 Schools 的 CSS animation list。

如果你想保留它在页面上的视觉位置，你应该尝试动画化它的 height（这仍然会影响其他元素的位置），或者 opacity（它的透明度如何是）。您甚至可以尝试为 z-index 设置动画，这是 z 轴（深度）上的位置，方法是将一个元素放在它的顶部，然后重新排列顶部的内容。但是，我建议使用 opacity，因为它会保留元素所在的垂直 space。

我更新了 fiddle 以显示示例。

祝你好运！

Answer 4

您可以使用 animation 的 delay 道具，只需在延迟后设置 visibility:visible，演示：

@keyframes delayedShow {
  to {
    visibility: visible;
  }
}

.delayedShow{
  visibility: hidden;
  animation: 0s linear 2.3s forwards delayedShow ;
}

So, Where are you?

<div class="delayedShow">
  Hey, I'm here!
</div>

Answer 5

使用animation-delay:

div {
    width: 100px;
    height: 100px;
    background: red;
    opacity: 0;

    animation: fadeIn 3s;
    animation-delay: 5s;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

Fiddle

带有延迟的纯 CSS 动画可见性

Pure CSS animation visibility with delay

css

css-animations