javascript使用keyframes实现简单动画效果

本文中代码实现的效果如下，当打开html页面后，点击div设置的颜色块，启动动画，颜色渐变到目标颜色，当动画执行中，点击颜色块，则停止动画，并且恢复最开始状态；修改animation: moveease 2sinfinite alternate 中的2s为10s则动画市场为10秒；在前端使用js开发中，可以使用keyframes实现简单的动画效果；

异想实验室

1768人浏览 · 2022-10-25 03:59:31

异想实验室 · 2022-10-25 03:59:31 发布

在前端使用js开发中，可以使用keyframes实现简单的动画效果；

本文中代码实现的效果如下，当打开html页面后，点击div设置的颜色块，启动动画，颜色渐变到目标颜色，当动画执行中，点击颜色块，则停止动画，并且恢复最开始状态；

通过点击事件，修改div的id名实现的效果

style代码如下

<style>
    #r1{
        animation: move  ease 2s  infinite alternate
    }
    @keyframes move {
        0%{transform: scale(1);}
        100%{
            width: 500PX;
            background-color: blue;
        }
    }
</style>

script代码如下

    <script>
        test_keyframes=function(){
            element_id=document.getElementsByTagName('div');
			if (element_id[0].id==='') {
				element_id[0].id='r1';
			} else{
				element_id[0].id='';
			}

        }

    </script>

整个html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>keyframes动画</title>
</head>
<style>
    #r1{
        animation: move  ease 2s  infinite alternate
    }
    @keyframes move {
        0%{transform: scale(1);}
        100%{
            width: 500PX;
            background-color: blue;
        }
    }
</style>


<body>
    <div id="" onclick="test_keyframes()" style="height: 50px;width: 100px;background-color: rgb(255, 0, 149);">
    </div>
    <script>
        test_keyframes=function(){
            element_id=document.getElementsByTagName('div');
			if (element_id[0].id==='') {
				element_id[0].id='r1';
			} else{
				element_id[0].id='';
			}

        }

    </script>

</body>
</html>

修改animation: move ease 2s infinite alternate 中的2s为10s则动画市场为10秒；