我的网站有一个简单的CSS动画，我想在两秒钟后开始动画。我试过使用动画延迟，但它不起作用。请告诉我我做错了什么。
.type-animation {
box-shadow: .6em 0 0 #00CCC7;
overflow: hidden;
white-space: nowrap;
}
h1.type-animation {
width: 10ch;
animation-delay: 2s;
animation: cursor .5s step-end infinite alternate,
type 1.5s steps(10, end)
}
@keyframes type {
0% {
width: 0;
}
}
@keyframes cursor {
50% {
box-shadow: .6em 0 0 transparent;
}
}<body>
<h1 class="type-animation">A Website.</h1>
</body>您正在用下面的animation简写规则覆盖animation-delay: 2s;。
将animation-delay移动到animation规则之后，如下所示：
h1.type-animation {
width: 10ch;
animation: cursor .5s step-end infinite alternate,
type 1.5s steps(10, end);
animation-delay: 2s;
}
延迟会起作用，正如您在以下片段中看到的：
.type-animation {
box-shadow: .6em 0 0 #00CCC7;
overflow: hidden;
white-space: nowrap;
}
h1.type-animation {
width: 10ch;
animation: cursor .5s step-end infinite alternate,
type 1.5s steps(10, end);
animation-delay: 2s;
}
@keyframes type {
0% {
width: 0;
}
}
@keyframes cursor {
50% {
box-shadow: .6em 0 0 transparent;
}
}<body>
<h1 class="type-animation">A Website.</h1>
</body>然而，我猜这不是你想要的结果！我想你也希望元素被隐藏，直到动画开始。
这些是您需要在元素本身中添加的行：
h1.type-animation {
/* 1. Start with the element hidden */
visibility: hidden;
/* 2. This keeps it visible after the animation ends (when visibility is on in the last keyframe) */
animation-fill-mode: forwards;
}
在关键帧中：
@keyframes type {
0% {
/* 3. Turn visibility on when animation starts */
visibility: visible;
}
100% {
/* 4. This along animation-fill-mode will keep visibility after animation ENDS */
visibility: visible;
}
}
看到它工作：
.type-animation {
box-shadow: .6em 0 0 #00CCC7;
overflow: hidden;
white-space: nowrap;
}
h1.type-animation {
visibility: hidden;
width: 10ch;
animation: cursor .5s step-end infinite alternate,
type 3s steps(10, end);
animation-delay: 2s;
animation-fill-mode: forwards;
}
@keyframes type {
0% {
width: 0;
visibility: visible;
}
100%{
visibility: visible;
}
}
@keyframes cursor {
50% {
box-shadow: .6em 0 0 transparent;
}
}<body>
<h1 class="type-animation"><span>A Website.</span></h1>
</body>如果你想创建一个打字效果，上面提到的代码片段方法并不理想和有效。
这是一个具有2s动画延迟的打字效果代码片段。我在javascript中插入了一个简单的setTimeout函数，它是在加载DOM时触发的，所以文本在之前不会显示，只有在动画计划开始的2秒之后才会显示。
window.addEventListener('load',(event)=>{
const timer = document.querySelector('.type');
setTimeout(function(){
timer.style.opacity = 1;
},2000);
})/* GLOBAL STYLES */
body {
background: #333;
padding-top: 5em;
display: flex;
justify-content: center;
}
/* DEMO-SPECIFIC STYLES */
.type{
color: #fff;
font-family: monospace;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(30, end),
blink-caret .5s step-end infinite;
animation-delay: 2s;
opacity:0;
}
/* The typing effect */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange }
}<div class="typewriter">
<h1 class="type">A website.</h1>
</div>