使用延迟实现纯CSS动画的可见性

Question

使用延迟实现纯CSS动画的可见性

csscss-animations

66

我想在不使用JavaScript的情况下实现一些加载时的动画效果。JavaScript很容易，但CSS就不太容易了。

我有一个

元素，应该处于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;
}

这个元素非常重要，因为它是隐藏的，所以完全不占用任何空间。我创建了一个JSFiddle来进行测试。

我的主要问题是SEO……我认为JS选项对于SEO来说并不是很好，这就是为什么我想要一个纯CSS的替代方案。我也有兴趣测试这些动画，看看它们的限制在哪里（我现在看到了吗？）。在这样的挑战中有点开心。

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

- sebastienbarbier

5个回答

34

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

- Leo

这是一个纯粹而简单的解决方案，正是我所需要的。谢谢！ - jord8on

@Leo，我有一个问题。有没有办法让我的div被压缩，就好像它不存在一样，不占用屏幕上的任何高度，直到图像淡入后，才展开div所在的区域以显示div中的内容（在我的情况下是一张图片）？ - jord8on

如果我理解正确，你可以通过以下代码进行更改：div { width: 100px; height: 0px; ... to { opacity: 1; height: 100px; } - Leo

那太棒了！谢谢你的建议！最后一个问题。我喜欢我的 div 中实际图像的淡入效果。当此压缩的 div 扩展到（例如，高度：100px）时，我该怎么做才能使其缓慢地扩展到完整高度（就像淡入一样）？ - jord8on

你看到我关于如何使div慢慢扩张以显示先前不透明的元素至可见的最后一个问题了吗？ - jord8on

@jord8on，如果您想要先发生某件事情，然后在另一个元素上发生另一件事情，您应该使用两个动画，第二个动画的延迟时间为第一个动画的持续时间。 - Mr Lister

13

您可以使用动画中的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>

- James Yang

3

很遗憾，您无法对“display”属性进行动画处理。如果要查看可以进行动画处理的完整列表，请尝试使用W3学校提供的此CSS动画列表。

如果您想保留它在页面上的视觉位置，您应该尝试对其进行动画处理，包括其“height”（仍会影响其他元素的位置）或“opacity”（透明度）。您甚至可以尝试通过将一个元素放在其上方并重新排列顶部内容来动画处理“z-index”，即z轴（深度）上的位置。但是，我建议使用“opacity”，因为它保留了元素所在的垂直空间。

我已经更新了fiddle，以展示一个例子。

祝你好运！

- Isaac Minogue

2

并非所有属性都可以进行动画处理，

这里提供了可以进行动画处理的属性参考列表。

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

在您的情况下，您还可以根据所需效果动画处理透明度或高度。

透明度动画示例

- maioman

如果您能使fiddle将CSS元素的方向从不可见变为可见，我会点赞。 - Ely

可见性是过渡效果的最佳选择，而不是不透明度。效果非常好。 - Milos Dakic

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oka · Accepted Answer

你的想法是正确的，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，可以在动画结束后保持元素的可视状态。