2016-04-21 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI＆UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
![]()
展开全部
可以试试移除动画的类再重新给节点添加动画的类
下面这个demo是执行一次动画，2s后再重新执行一遍
（因为是demo，我就没有考虑兼容性问题，没有添加css前缀）
1
<div class="dot anm" id="anm"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.dot {
position: relative;
width: 100px;
height: 100px;
margin: 100px;
border-radius: 50%;
background: #000;
}
.anm {
animation: move 1s forwards;
}
@keyframes move
{
from {
left:0px;
}
to {
left:200px;
setTimeout(function() {
var dom = document.getElementById('anm');
dom.className = 'dot';
setTimeout(function() {
dom.className = 'dot anm';
}, 10);
}, 2000);
下面这个demo是执行一次动画，2s后再重新执行一遍
（因为是demo，我就没有考虑兼容性问题，没有添加css前缀）
1
<div class="dot anm" id="anm"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.dot {
position: relative;
width: 100px;
height: 100px;
margin: 100px;
border-radius: 50%;
background: #000;
}
.anm {
animation: move 1s forwards;
}
@keyframes move
{
from {
left:0px;
}
to {
left:200px;
setTimeout(function() {
var dom = document.getElementById('anm');
dom.className = 'dot';
setTimeout(function() {
dom.className = 'dot anm';
}, 10);
}, 2000);
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<head>
<style>
@keyframes longer {
from {width: 100px;}
to {width: 200px;}
}
@-moz-keyframes longer {
from {width: 100px;}
to {width: 200px;}
}
@-webkit-keyframes longer {
from {width: 100px;}
to {width: 200px;}
}
@-o-keyframes longer {
from {width: 100px;}
to {width: 200px;}
}
#animator {
width: 100px;
height: 100px;
background: red;
}
.animation {
animation: longer 0.5s;
-moz-animation: longer 0.5s;
-webkit-animation: longer 0.5s;
-o-animation: longer 0.5s;
}
</style>
</head>
<body>
<div id="animator" class="animation"></div>
<script>
var animator = document.getElementById('animator');
animator.addEventListener('animationend', endHandler);
function endHandler() {
animator.removeEventListener('animationend', endHandler);
animator.className = '';
setTimeout(function () {
animator.className = 'animation';
}, 0);
}
</script>
</body>
</html>
<head>
<style>
@keyframes longer {
from {width: 100px;}
to {width: 200px;}
}
@-moz-keyframes longer {
from {width: 100px;}
to {width: 200px;}
}
@-webkit-keyframes longer {
from {width: 100px;}
to {width: 200px;}
}
@-o-keyframes longer {
from {width: 100px;}
to {width: 200px;}
}
#animator {
width: 100px;
height: 100px;
background: red;
}
.animation {
animation: longer 0.5s;
-moz-animation: longer 0.5s;
-webkit-animation: longer 0.5s;
-o-animation: longer 0.5s;
}
</style>
</head>
<body>
<div id="animator" class="animation"></div>
<script>
var animator = document.getElementById('animator');
animator.addEventListener('animationend', endHandler);
function endHandler() {
animator.removeEventListener('animationend', endHandler);
animator.className = '';
setTimeout(function () {
animator.className = 'animation';
}, 0);
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
