我刚刚为我的代码添加了“动画延迟”,以便内容仅在5秒后从屏幕外滑动。但是,我发现正在移动的内容在“延迟”运行时显示在“最终”位置,然后在5秒后内容从左侧滑入(根据需要)。
有人知道我如何调整我的代码,以便最终位置最初不会显示内容吗?这是我的代码的精简版本:
<style>
div {
width:100px;
height:100px;
background-color:red;
-webkit-animation: slideFromLeft 3500ms ease-out;
-moz-animation: slideFromLeft 3500ms ease-out;
-ms-animation: slideFromLeft 3500ms ease-out;
animation-delay:5s;
-webkit-animation-delay:5s; /* Safari and Chrome */
}
@-webkit-keyframes slideFromLeft {
from {
opacity: 1;
-webkit-transform: translateX(-100%);
}
to {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
@-moz-keyframes slideFromLeft {
from {
opacity: 1;
-moz-transform: translateX(-100%);
}
to {
opacity: 1;
-moz-transform: translateX(0%);
}
}
@-ms-keyframes slideFromLeft {
from {
opacity: 1;
-ms-transform: translateX(-100%);
}
to {
opacity: 1;
-ms-transform: translateX(0%);
}
}
</style>
<body>
<div>
答案 0 :(得分:5)
将opacity:0
添加到初始div的css中。这样,在动画设置完成之前它是不可见的。
此外,添加animation-fill-mode: forwards;
以使其保持最终状态。