css动画 js写法
CSS动画和JavaScript动画都是创建动画的方式,但它们有不同的使用场景和优缺点。在JavaScript中创建CSS动画,我们通常是通过操作CSS属性或者改变类来完成的。
以下是一个简单的例子,我们使用JavaScript来改变一个元素的类,从而实现动画效果:
<!DOCTYPE html>
<html>
<head>
    <style>
        .animate {
            animation: myAnimation 2s infinite;
        }
        @keyframes myAnimation {
            0%  {background-color: red;}
            50%  {background-color: yellow;}
            100% {background-color: blue;}
        }
    </style>
</head>
<body>
html动画效果<h1 id="myElement">Hello World!</h1>
<button onclick="myFunction()">Click Me!</button>
<script>
    function myFunction() {
        ElementById("myElement").classList.add("animate");
    }
</script>
</body>
</html>
在这个例子中,当你点击按钮时,会触发myFunction函数,这个函数会到id为"myElement"的元素,并给它添加一个名为"animate"的类。这个类定义了一个名为"myAnimation"的关键帧动画,这个动画会在2秒内改变元素的背景颜。
这是一个非常基础的例子,实际上你可以通过JavaScript来更复杂地控制CSS动画,例如通过计算来改变元素的属性,或者在动画结束后执行某些操作等等。