Question

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

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

Answer 1

为了实现这一点，您需要将CSS放在Body内容的底部，以确保DOM已经渲染以及运行任何其他CSS /脚本（例如页面已加载）。也就是说，更好的方式将是在Javascript中收听文档加载事件，并在此时应用转换类，如Josiah在您的问题的评论中所述。< / p>

Demo Fiddle

HTML

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

CSS

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

使用CSS加载页面后延迟滑动

1 个答案:

Demo Fiddle