带有延迟的纯 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;
}

隐藏很重要，这个元素根本不占用空间。 I created a JSFiddle 进行相当的测试。

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

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

Answer 1

您认为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 2

使用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

Answer 3

您可以使用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 4

很遗憾，您无法为 display 属性设置动画。有关您可以制作动画的完整列表，请尝试 w3 Schools 的 CSS animation list。

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

我已更新 fiddle 以显示示例。

祝你好运！

Answer 5

你不能为每个属性设置动画，

here's 是动画属性的引用

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

在您的情况下，您还可以根据要渲染的效果类型为 opacity 或 height 设置动画_

fiddle with opacity animation