可以定义一个变量flag
flag === true 表示元素在初始位置
flag === false 表示元素在动画执行后的位置
在click事件中根据flag的值执行不同的效果

把animation放在一个class中

  .animate{
            animation:xxx 1s linear forwards;
        }

在点击事件中调用

element.onclick = function(){
    this.classList.toggle("animate");
}

这样就能动态的切换了

我觉得这个需求适合用CSS过渡来做，具体步骤：

1. 给元素绑过渡属性，写上需要变换的属性名（如果只是定位要变的话可以直接用'all'），过渡（即动画）时间和timing-function；

2. 新建一个类，写上元素最终定位位置的相应属性，比如top: xxxpx;left: yyypx;之类的；

3. 在click回调里使用toggleClass()，如果元素上有该属性则去掉，如果没有就加上。