动画延迟故障
动画延迟故障
提问于 2019-03-20 07:54:32
我正在为我的网站做一个加载屏幕，我想在几秒钟内从0%到100%。我已经成功地完成了，但当我尝试添加动画延迟时，什么也没有发生。我希望动画开始后2秒的网站加载。有人能帮上忙吗？
代码如下：
.loading
{
position: fixed;
top: 50%;
left: 50%;
height: 10px;
display: flex;
transform: translate(-70px);
animation-delay: 2s;
}
.obj
{
width: 0px;
height: 8px;
background: black;
border-radius: 15px;
z-index: 1; position:relative;
animation:loading 2s;
animation-fill-mode: forwards;
animation-delay: 2s;
}
@keyframes loading{
0% {
width: 0px;
}
100% {
width: 150px;
}
}<head>
<link rel="stylesheet" type="text/css" href="loadingstyles.css">
</head>
<body>
<div class="loading">
<div class="obj"></div>
</div>
</body>
回答 1
Stack Overflow用户
发布于 2019-03-20 07:58:14
我想你是在找transition-delay吧。你可以把它添加到你的css中。https://www.w3schools.com/cssref/css3_pr_transition-delay.asp
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55251645
复制相关文章
相似问题