上图
- 代码 body
<body>
<img src="img/top2.jpg" id="toTop" class="goTop">
</body>
代码 css
<style type="text/css">
.goTop{
width: 100px;
height: 100px;
position: fixed;
bottom: 10%;
left: 60%;
cursor: pointer;
animation: move1 1.5s;
animation-play-state: paused;
}
.goTop2{
width: 100px;
height: 100px;
position: fixed;
bottom: 10%;
left: 60%;
animation: move2 1.5s;
}
@keyframes move1{
100%{
bottom: 80%;
}
}
@keyframes move2{
100%{
bottom: 80%;
}
}
</style>
js
<script type="text/javascript">
window.onload = function() {
var toTop = document.getElementById("toTop");
var index = 0;
toTop.onclick = function() {
// if(index == 1){
// toTop.className = "goTop";
// toTop.style.animationPlayState = "running";
// index = 0;
// }else{
// toTop.className = "goTop2";
// index = 1;
// };
toTop.className = toTop.className == "goTop" ? "goTop2" : "goTop";
if (toTop.className == "goTop") {
toTop.style.animationPlayState = "running";
}
};
}
</script>
全部源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画再次执行</title>
<style type="text/css">
.goTop {
width: 100px;
height: 100px;
position: fixed;
bottom: 10%;
left: 60%;
cursor: pointer;
animation: move1 1.5s;
animation-play-state: paused;
}
.goTop2 {
width: 100px;
height: 100px;
position: fixed;
bottom: 10%;
left: 60%;
animation: move2 1.5s;
}
@keyframes move1 {
100% {
bottom: 80%;
}
}
@keyframes move2 {
100% {
bottom: 80%;
}
}
</style>
<script type="text/javascript">
window.onload = function() {
var toTop = document.getElementById("toTop");
var index = 0;
toTop.onclick = function() {
// if(index == 1){
// toTop.className = "goTop";
// toTop.style.animationPlayState = "running";
// index = 0;
// }else{
// toTop.className = "goTop2";
// index = 1;
// };
toTop.className = toTop.className == "goTop" ? "goTop2" : "goTop";
if (toTop.className == "goTop") {
toTop.style.animationPlayState = "running";
}
};
}
</script>
</head>
<body>
<img src="img/top2.jpg" id="toTop" class="goTop">
</body>
</html>
好啦 就这么多了,改变class属性名,暂时只能想到这个方法,欢迎有更好方法的大神指正