如何使用javascript在div上播放动画

Cli*_*udu 2 html javascript css css-animations

到目前为止,这是我的脚本:

HTML:

<head>
<link rel="stylesheet" type="text/css" href="mystyles.css">
</head>

<body>
    <div id="test"></div>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

CSS:

#test {
    background-color: blue;
    width: 100px;
    height: 100px;
}

/* Here is the animation (keyframes) */
@keyframes fading {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
Run Code Online (Sandbox Code Playgroud)

但是,如何使用某些JavaScript在CSS #div上播放CSS动画(关键帧)?

小智 5

尝试从js添加“动画” css属性:

document.getElementById('test').style.animation = 'fading 2s infinite'
Run Code Online (Sandbox Code Playgroud)