为了延迟动画，我们使用 CSS animation-delay 属性，它指定元素被加载和动画开始之间的时间。
但是在延迟动画时可能会遇到一些困难，例如动画播放后元素消失的问题。
让我们看看这个问题的解决方案。
具有 CSS 属性的解决方案
在下面的例子中，有一个 <div> 元素，它的类是“animation”。
首先，我们添加@keyframes（我们在@keyframes 中使用-webkit 和-mozprefixes）。
对于我们的@keyframes，我们使用百分比并在 0%、40% 和 100% 处指定顶部、左侧和背景属性。
然后，我们通过设置“动画”类的宽度和高度并添加带有“相对”值的位置属性来设置“动画”类的样式。
我们通过 animation 属性指定延迟（5s）并将 animation-fill-mode 属性设置为其“none”值。
使用 animation 和 animation-fill-mode 属性延迟动画的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
@-webkit-keyframes background {
0% {
top: 0;
left: 0;
background: #5bd97d;
}
40% {
top: 100px;
left: 50px;
background: pink;
}
100% {
top: 50px;
left: 50px;
background: purple;
}
}
@-moz-keyframes background {
0% {
top: 0;
left: 0;
background: #5bd97d;
}
40% {
top: 100px;
left: 150px;
background: pink;
}
100% {
top: 50px;
left: 50px;
background: purple;
}
}
@keyframes background {
0% {
top: 0;
left: 0;
background: #5bd97d;
}
40% {
top: 100px;
left: 150px;
background: pink;
}
100% {
top: 50px;
left: 100px;
background: purple;
}
}
.animation {
height: 100px;
width: 100px;
position: relative;
-webkit-animation: background 5s infinite;
-moz-animation: background 5s infinite;
animation: background 5s infinite;
animation-fill-mode: none;
}
</style>
</head>
<body>
<div class="animation"></div>
</body>
</html>
结果
在我们的下一个示例中，我们使用带有@keyframes 的“from”和“to”关键字而不是百分比，并指定动画起点和终点的不透明度。
其中我们将 animation-fill-mode 属性设置为其“forwards”值。
创建延迟动画的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#animation1 {
height: 120px;
width: 120px;
background: #5bd97d;
opacity: 0;
-webkit-animation: fadein 1s ease-in alternate;
-moz-animation: fadein 1s ease-in alternate;
animation: fadein 1s ease-in alternate;
animation-delay: 1s;
animation-fill-mode: forwards;
}
</style>
</head>
<body>
<div id="animation1"></div>
</body>
</html>
animation-fill-mode 属性用于在动画未播放时为元素设置样式。
此处的“forwards”值用于指定元素必须保留由最后一个关键帧设置的样式值。
日期：2020-06-02 22:15:03 来源：oir作者：oir