html - CSS 动画延迟不适用于淡入淡出效果。无论我将延迟设置为什么,动画都会立即开始
问题描述
基本上就是标题所说的。我试图让这个 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 上使用这个。
解决方案
当您为不同的浏览器使用前缀并且它们在original之后animation
,浏览器将使用它们的前缀动画(例如,使用-webkit
will expect的浏览器-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
推荐阅读
- android - android设备到设备推送通知响应200而不是201
- r - 当最初是字符时,计算数据框中列的平均值
- tableau-api - 如何处理 Tableau 中的此数据提取错误?
- python - 访问元素的方式比集合更快
- java - Spring Cloud Config Vault 奇怪的请求
- python - 连接数据框字典Python
- react-native - 将样式分配给 props.children 的 View 包装器
- pytorch - 火炬模型从字符串评估
- ms-access - 如何正确制定具有多个参数的查询设计标准?
- python - 当元素包含numpy数组时无法测试python列表元素成员资格