基本上是标题所说的。我正在尝试让此div在页面加载后出现约4秒，但它立即出现。它正在执行淡入淡出动画（持续2秒），但是此动画立即开始。
这是HTML：
.abouttext {
text-align: center;
/*color: white; removed for snippet demo*/
width: 80%;
margin-left: 10%;
margin-right: 10%;
float: right;
}
#aboutone {
margin-top: 10px;
animation: fadeIn ease 2s;
animation-delay: 5s;
-webkit-animation: fadeIn ease 2s;
-moz-animation: fadeIn ease 2s;
-o-animation: fadeIn ease 2s;
-ms-animation: fadeIn ease 2s;
z-index: 0;
opacity: 0;
animation-fill-mode: forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="abouttext" id="aboutone">
<p>hello</p>
</div>在这方面的任何帮助都将是巨大的。我已经用谷歌搜索了几个小时，但似乎无法弄清为什么它不起作用。
ps我正在Chrome上使用它。
由于您在不同的浏览器中使用前缀，并且前缀在原始浏览器之后animation，因此浏览器将使用其前缀的动画（例如，使用的浏览器-webkit会期望-webkit-animation-delay）。
你可以添加animation-duration所有单独的前缀或刚使用animation-delay中animation一起：
#aboutone {
text-align: center;
margin-top: 10px;
z-index: 0;
opacity: 0;
/* animation: duration timing-function delay name */
animation: 2s ease 5s fadeIn;
-webkit-animation: 2s ease 5s fadeIn;
-moz-animation: 2s ease 5s fadeIn;
-o-animation: 2s ease 5s fadeIn;
-ms-animation: 2s ease 5s fadeIn;
animation-fill-mode: forwards;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-ms-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}<div class="abouttext" id="aboutone">
<p>hello</p>
</div>如果您希望动画在整个主体加载后开始（有延迟）开始播放，而在用户加载页面时不正确，则可以在上使用onload事件监听器body（如对这个问题的回答所述）
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句