在一个动画中，我们想要它延迟使用，你会想到哪个属性呢？下面我们通过一个demo来实现这个简单的小功能，文字延迟放大功能。 特性用了css3中的animation-delay从而来实现动画延迟效果 直接上代码，把代码复制下去就可以看到该效果了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0px 0px;
}
.container {
display: flex;
width: 100%;
margin: 100px auto;
}
.container div {
width: 50px;
height: 50px;
font-size: 20px;
animation: move 1s linear;
animation-fill-mode: forwards;
}
@keyframes move {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="container" id="container">
</div>
<script>
window.addEventListener("DOMContentLoaded", function () {
let str = "欢迎来到中国"
const parent = document.querySelector("#container");
for(let i = 0; i < str.length; i++){
const div = document.createElement("div");
div.innerText = str[i];
div.style.animationDelay = `${i * .5}s`;
parent.appendChild(div);
}
})
</script>
</body>
</html>
