我设计一个会东的小人，请教如何让他点一次动一次？

[pinews]

如何让每次点击都可以重新开始，现在只有第一次点击能动

http://jsrun.net/S8XKp

编辑模式 http://jsrun.net/S8XKp/edit

[lllllliu]

没太懂，但是看了下。
按照你的代码来的话，你可以每次先把那个 move 的样式去掉，然后再添加。。

[en20]

这样？？
```
let div = document.querySelector("div")

div.onclick = function() {
div.className = "";
setTimeout(() => {
div.className = "move";
},5000)
```

[davin]

可以把 `document.querySelector("div").className = "move";` 换成 `this.classList.toggle('move');` 这句，让小人来回动

[keventseng]

将 gif 导出多张帧图片，然后用点击事件轮换图片。

[azh7138m]

https://css-tricks.com/restart-css-animation/

没啥好的建议，重新生成一个新的元素吧，或者不用 class，直接操作 style （

[pinews]

@davin 单数点击可以，双数是错的。
@en20 可以了，谢谢，不过我把 5000 改成了 0，这样才好。

[wunonglin]

```html
<div>
<img id='img' src=http://image.99114.com/upfile/pro/20071224/0935550505.gif>
</div>
```

```css
img {
cursor: pointer;
transition: all .4s ease;
background-color: aquamarine;
}
img.move{
transform: translateX(100%);
}

div {
width: 100%;
}

```

```js


document.querySelector("#img").onclick = function() {
document.querySelector("#img").classList.contains('move') ?
document.querySelector("#img").classList.remove('move') :
document.querySelector("#img").classList.add('move')
}
```

[pinews]

@azh7138m thank you 汇总的很好，javascript 克隆那个算比较简单的，谢谢

[wunonglin]

https://jsfiddle.net/t3x1uL7z/

[pinews]

@wunonglin 你这个和 @davin 是一样的

[abc635073826]

@keventseng 这的确是最清晰的方式，但肯定不是楼主要的高大上的方式

[guomuzz]

搞一个原地动的小人 然后 js 控制图片 position...

[wizcas]

requestAnimationFrame 手撸动画