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

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); }}

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); }}

Share Improve this question asked Aug 27, 2015 at 0:26 BragDeal 7482 gold badges10 silver badges25 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

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/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);

Something like this?

Changed keyframe animation so it orbits correctly
Added new animation for the 'trail' to fadeout over time.

Is this what you meant?

#object{
position: absolute;
top: 200px;
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;
}

#object:after{
content: "";
position: absolute;
top: 0;
left:0;
right:0;
margin: 0 auto;
width: 100px;
height: 10px;
opacity: .1;
background-color: red;
-webkit-animation: myOrbit-fadeout 6s linear infinite; 
-moz-animation: myOrbit-fadeout 6s linear infinite; 
-o-animation: myOrbit-fadeout 6s linear infinite; 
animation: myOrbit-fadeout 6s linear infinite;
}


@-webkit-keyframes myOrbit {
0%  { -webkit-transform: rotate(0deg) translateY(200px); }
25%  { -webkit-transform: rotate(90deg) translateY(200px); }
50%  { -webkit-transform: rotate(180deg) translateY(200px); }
75%  { -webkit-transform: rotate(270deg) translateY(200px); }
100%  { -webkit-transform: rotate(360deg) translateY(200px); }
}

@-moz-keyframes myOrbit {
0%  { -moz-transform: rotate(0deg) translateY(200px); }
25%  { -moz-transform: rotate(90deg) translateY(200px); }
50%  { -moz-transform: rotate(180deg) translateY(200px); }
75%  { -moz-transform: rotate(270deg) translateY(200px); }
100%  { -moz-transform: rotate(360deg) translateY(200px); }
}

@-o-keyframes myOrbit {
0%  { -o-transform: rotate(0deg) translateY(200px); }
25%  { -o-transform: rotate(90deg) translateY(200px); }
50%  { -o-transform: rotate(180deg) translateY(200px); }
75%  { -o-transform: rotate(270deg) translateY(200px); }
100%  { -o-transform: rotate(360deg) translateY(200px); }
}

@keyframes myOrbit {
0%  { transform: rotate(0deg) translateY(200px); }
25%  { transform: rotate(90deg) translateY(200px); }
50%  { transform: rotate(180deg) translateY(200px); }
75%  { transform: rotate(270deg) translateY(200px); }
100%  { transform: rotate(360deg) translateY(200px); }
}

@-webkit-keyframes myOrbit-fadeout {
0%  { opacity: 1.0; }
25%  { opacity: .75; }
50%  { opacity: .5; }
75%  { opacity: .25; }
100%  { opacity: 0; }
}
@-moz-keyframes myOrbit-fadeout {
0%  { opacity: 1.0; }
25%  { opacity: .75; }
50%  { opacity: .5; }
75%  { opacity: .25; }
100%  { opacity: 0; }
}
@-o-keyframes myOrbit-fadeout {
0%  { opacity: 1.0; }
25%  { opacity: .75; }
50%  { opacity: .5; }
75%  { opacity: .25; }
100%  { opacity: 0; }
}
@keyframes myOrbit-fadeout {
0%  { opacity: 1.0; }
25%  { opacity: .75; }
50%  { opacity: .5; }
75%  { opacity: .25; }
100%  { opacity: 0; }
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - CSS How can I make a particle leave a trail that fades away? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)