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