CSS How can I make a particle leave a trail that fades away?

Question

I got the particle to move around which is what I wanted, but I want to add a little trail that will fade a way and I am not sure how to go about doing that

Is it possible to do with only css? or do I have to involve jquery in this?

Here is a demo: LINK

#object{
    position: absolute;
    bottom:-2em;
    left:0;
    right:0;
    margin:0 auto;
    width: 10px;
    height: 10px;
    background: red;    

    -webkit-animation: myOrbit 6s linear infinite; 
       -moz-animation: myOrbit 6s linear infinite; 
         -o-animation: myOrbit 6s linear infinite; 
            animation: myOrbit 6s linear infinite;   
}


@-webkit-keyframes myOrbit {
    0%  { -webkit-transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
    25%  { -webkit-transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg) scale(.60); }
    50%  { -webkit-transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
    75%  { -webkit-transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
    100%  { -webkit-transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }

}

@-moz-keyframes myOrbit {
    0%  { -moz-transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
    25%  { -moz-transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg) scale(.60); }
    50%  { -moz-transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
    75%  { -moz-transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
    100%  { -moz-transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }
}

@-o-keyframes myOrbit {
        0%  { -o-transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
    25%  { -o-transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg) scale(.60); }
    50%  { -o-transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
    75%  { -o-transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
    100%  { -o-transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }
}

@keyframes myOrbit {
    0%  { transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
    25%  { transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg) scale(.60); }
    50%  { transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
    75%  { transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
    100%  { transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }}

Answer 1

I was doing something similar which is how I found this question. I took what I came up with and adapted it to your answer. Not sure it will work for what you're doing but it's still fun.

http://jsfiddle.net/y40kwyhr/2/

var obj = document.getElementById("object");

class Particle {
    constructor(parent) {
    this.div = document.createElement("div");
    this.div.classList.add("particle");
    this.div.classList.add("twinkle");
    this.div.id = "particle-" + Date.now();
    parent.appendChild(this.div);

    setTimeout(() => { // remove particle
        if(this.driftIntervalId) clearInterval(this.driftIntervalId);
            this.div.remove();
    }, 400);
  }

  drift(speed = 1) {
    var rad = Math.PI * Math.random();

    this.driftIntervalId = setInterval(() => {
        var left = +this.div.style.left.replace("px",'');
      var top = +this.div.style.top.replace("px",'');

      left += Math.sin(rad) * speed;
      top += Math.cos(rad) * speed;

      this.div.style.left = left + "px";
      this.div.style.top = top + "px";
    }, 10);
  }
}

var particleFactory = function(meteor) {
    var rect = meteor.getBoundingClientRect();
  var particle = new Particle(meteor.parentElement);
  particle.div.style.left = rect.left + "px";
  particle.div.style.top = rect.top + "px";
  particle.drift(0.4);

  setTimeout(() => {
    particleFactory(meteor);
  }, 100);
};
particleFactory(obj);