css animation 触发,在JavaScript中触发CSS动画

我不知道如何使用JQuery，因此我需要一种仅可以使用JavaScript触发动画的方法。

当用户滚动页面时，我需要调用/触发CSS动画。

function start() {

document.getElementById('logo').style.animation = "anim 2s 2s forward";

document.getElementById('earthlogo').style.animation = "anim2 2s 2s forward";

}

* {

margin: 0px;

}

#logo {

position: fixed;

top: 200px;

height: 200px;

width: 1000px;

left: 5%;

z-index: 4;

opacity: 0.8;

}

#earthlogo {

position: fixed;

top: 200px;

height: 120px;

align-self: center;

left: 5%;

margin-left: 870px;

margin-top: 60px;

z-index: 4;

opacity: 0.9;

}

@keyframes anim {

50% {

filter: blur(10px);

transform: rotate(-15deg);

box-shadow: 0px 0px 10px 3px;

}

100% {

height: 100px;

width: 500px;

left: 10px;

top: 10px;

box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.7);

background-color: rgba(0, 0, 1, 0.3);

opacity: 0.7;

}

}

@keyframes anim2 {

50% {

filter: blur(40px);

transform: rotate(-15deg);

}

100% {

height: 60px;

width: 60px;

left: 10px;

top: 10px;

margin-left: 435px;

margin-top: 30px;

opacity: 0.8;

}

}

#backstar {

position: fixed;

width: 100%;

z-index: 1;

}

#earth {

position: absolute;

width: 100%;

z-index: 2;

top: 300px;

}