昨天寫作業想要實現通過點擊觸發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的控制。