在前端使用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秒；
