如何在js中制作continuos打开动画

Question

如何在html、css、js 中制作一个酷而简单的开场动画

我试过了，但没有成功：-

html代码

<div class="Anim">
<div>Header</div>
</div>

Css代码：-

.Anim {
position: absolute;
top: -100px;
left: 0;
width: 100%;
height: 100px;
background: purple;
color: red;
text-align: center;
font-size: 50px;
border: 3px solid lime;
}

Javascript代码：-

function anim() {
let elem = document.querySelector('.Anim');
let y = -100;
setTimeout(inner(),1000);
function inner() {
if(y == 0) {
return;
}
else {
y++;
elem.style.top = y + 'px';
setTimeout(inner(),1000);
}
}
}
anim();

他们有办法解决这个问题并使其发挥作用吗？如果有，请告诉我。

感谢您

Answer 1

您应该删除setTimeout(inner(), 1000)的括号

function anim() {
let elem = document.querySelector('.Anim');
let y = -100;
setTimeout(inner ,1000);
function inner() {
if(y == 0) {
return;
}
else {
y++;
elem.style.top = y + 'px';
setTimeout(inner(),1000);
}
}
}
anim();

还有一种更有效的方法是使用@keyframes