How can I animate an element with Javascript vanilla?
Similar with jquery. Example:

```
$( "button.continue" ).animate({left: "100px", top: "200px"}, 5000);

```

Where we pass the attribute, the desired value and the time.

In my case I need the left and top position to animate and slide.

**Solution**

I've done as @IceMetalPunk sugested and added the animation by css only when I need to animate.

```js
document.getElementById("animate").addEventListener("click", function(){
  let e = document.getElementById('elementToAnimate');

  e.classList.add("animate");
  setTimeout(()=> e.classList.remove("animate"), 500);

  e.style.top = Math.floor(Math.random() * window.innerHeight) + 'px';
  e.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';
});

document.getElementById("dontAnimate").addEventListener("click", function(){
  let e = document.getElementById('elementToAnimate');

  e.style.top = Math.floor(Math.random() * window.innerHeight) + 'px';
  e.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';
});
```

```css
#elementToAnimate {
  width: 20px;
  height: 20px;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
}

#elementToAnimate.animate {
  transition: left 500ms ease-in-out, top 500ms ease-in-out;
}
```

```html
<div id="elementToAnimate"></div>

<button id="animate">Animate</button>
<button id="dontAnimate">Dont Animate</button>
```