纯CSS动画可视性与延迟

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

我有一个

div

应该在

显示屏上显示：无和应
显示：块3秒钟后。很多资源告诉我，动画不适用于
显示
，但应适用于
可见性
（我在转换过程中经常使用）

我知道我有一个糟糕的javascript函数：

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

它很重要，因为它是隐藏的，这个元素根本不占用空间。做相当多的测试

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

感谢您的阅读，希望有人能给出答案。
您无法为每个属性设置动画

可设置动画特性的引用

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

在本例中，您还可以根据要渲染的效果类型设置
不透明度
或
高度
的动画_

你的想法是正确的，这是不可动画化的。它将不起作用，并且您不应该麻烦将其包含在关键帧动画中

在技术上是可以动画化的，但以一种迂回的方式。您需要根据需要保留该属性，然后捕捉到新值<代码>可见性
不会出现在关键帧之间，它只是步履艰难


.ele{
宽度：60px；
高度：60px；
背景色：#ff6699；
动画：1s fadeIn；
动画填充模式：正向；
可见性：隐藏；
}
.ele:悬停{
背景色：#123；
}
@关键帧淡入淡出{
99% {
可见性：隐藏；
}
100% {
能见度：可见；
}
}
很遗憾，您无法设置
显示
属性的动画。要获得可以制作动画的完整列表，请尝试w3学校提供的这一功能

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

我已经更新了以显示一个示例

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


@关键帧延迟显示{
到{
能见度：可见；
}
}
.推迟演出{
可见性：隐藏；
动画：0s线性2.3s向前延迟显示；
}
那么，你在哪里？
嘿，我来了！
使用
动画延迟
：

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; }
}

如果你能让小提琴在CSS元素的另一个方向上工作，我将向上投票：从不可见到可见是过渡的方式，而不是不透明。效果很好。为了提高可视性，我认为最好使用带有延迟的
转换
，而不是使用关键帧。例如：注意：不要忘记添加动画填充模式：forwards属性。@Oka，如果
不透明度将消失元素，那么
可见性的目的是什么？
将此方法与负边距（例如边距顶部：-200px）相结合，然后在100%时将边距顶部设置为初始所需值。当元素为minheight:200px时，您将有一个平滑的延迟，而不需要使用JS技巧，这总是有点痛苦。这是一个纯粹而简单的解决方案，正是我所需要的。非常感谢。你的问题@Leo。。。有没有办法让我的div被压缩。。。就好像它不在那里，也不占用屏幕上的任何像素高度，直到图像淡入，然后扩展div的区域以显示div中的内容（在我的cas中，是图像），如果我理解得很好，您可以使用。。。div{width:100px；height:0px；…到{opacity:1；height:100px；}效果非常好！谢谢你的提示！最后一个问题。我喜欢div中实际图像的淡入效果。当这个压缩div扩展到（例如height:100px）时，我能做些什么来让它慢慢扩展（比如淡入效果）看到我的最后一个问题了吗？关于使div缓慢展开以显示以前不透明的元素以使其可见？
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; }
}