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

在前端使用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==='') {