使用CSS加载页面后的延迟幻灯片

我在一个DIV中有一个标题，我想添加一个转换，以便在页面加载几秒钟后它滑入视图

---

这是否可以单独使用CSS？我知道转换和转换是如何工作的，但它们会立即加载，而这不是我想要的。

为了让它工作，您需要将CSS放在正文内容的底部，以确保DOM已呈现，以及任何其他CSS/脚本的运行（例如，页面已加载）。这就是说，更好的方法是在Javascript中侦听文档加载事件，并在此时应用一个转换类，正如在对您的问题的评论中所指出的

HTML

---

这就是说，即使使用

转换延迟

，您也需要某种方式向CSS表明需要更改某些内容，因此JS几乎是必不可少的。幸运的是，它非常小。这正是您想要的：

<div id="slidingContent"></div>

html,body{
    padding:0;
    margin:0;
}
#slidingContent {
    height: 100px;
    width: 100%;
    margin-top: -120px;
    color: red;
    background-color: grey;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.3s;    
    -webkit-animation-delay: 2s;
    -webkit-animation-fill-mode:forwards;   
    animation-name: slideIn;
    animation-duration: 0.3s;    
    animation-delay: 2s;
    animation-fill-mode:forwards;        
}
@-webkit-keyframes slideIn {
    0%   { margin-top: -120px;   }
    100% { margin-top: 0px;  }
}
@keyframes slideIn {
    0%   { margin-top: -120px;   }
    100% { margin-top: 0px;  }
}