昨天写作业想要实现通过点击触发animation动画的效果。想了很久发现可以用js修改css，不过我并没有直接掌握keyframes里的内容的技术（哭死）。所以我的解决思路是写两份css，一份是初始状态，一份是触发后需要显示的效果，但在实际操作中发现直接替换css文件后不知道为什么动画效果并不会实现，只能显示动画结束时的状态。后面我改变了做法，直接修改css内容。
实例：
html文件
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" src="index.css" type="text/css">
<script type="text/javascript" src="control.js"></script>
</head>
<body>
<div id="pic" class="pic1">
<img src="pic.jpg">
</div>
<button type="button" onclick="next()">start</button>
</body>
</html>css文件
.pic1{ /*初始状态*/
position: relative;
width:50%;
top:50%;
}
/*动画*/
.pic2{
position: relative;
width:50%;
top:50%;
animation-name: pic2;
animation-duration: 3s;
animation-fill-mode: both;
}
@-webkit-keyframes pic2{ /*适用于chrome*/
0% {
width:90%;
top:50%;
}
50%{
width:50%;
top:50%;
}
100% {
width:50%;
top:10%;
}
}js代码
function next(){
document.getElementById("pic").className="pic2";
}这样就实现了对animation的控制。