I'm trying to achieve a visual effect with `JavaScript` and `CSS` to fade out a simple custom-made cursor when it's not moving. I don't even know if such an effect is possible, but I think via `Keyframes` or `JavaScript` may be possible with a little help.

This is what I've got so far:

```js
var cursor = document.getElementById("cursor");
document.body.addEventListener("mousemove", function(e) {
cursor.style.left = e.clientX + "px",
cursor.style.top = e.clientY + "px";
});
```

```css
* {
  padding: 0;
  margin: 0;
  border: 0;
}

html, body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: #e8e8e8;
    cursor: none;
}

.inactive-fade-out {
    transition: fadeout 150ms ease-out;
}

@keyframes fadeout {
    from {
      opacity: 1;
    }
    to {
      opacity: 0.1;
    }
}

#cursor {
    position: fixed;
    border-radius: 50%;
    transform: translateX(-50%) translateY(-50%);
    left: -100px;
    top: 50%;
    background-color: black;
    height: 8px;
    width: 8px;
    transition: all 150ms ease-out;
}
```

```html
<div id="cursor" class="inactive-fade-out"></div>
```

Objective:
----------

* Achieve the effect of fading out the cursor when it's not moving in the viewport with `CSS` or `JavaScript`

Extra points:
-------------

* Avoid (if possible) the use of external libraries like `jQuery`

Your help is very appeciated!