要使用jQuery和CSS制作动画明星吗？

Question

在我当前的项目中，我需要使用jQuery和CSS创建逼真的但重量非常轻的闪烁星星动画。

这就是我要寻找的：

https://codepen.io/osublake/pen/pWWQaE

所以我试图提出自己的解决方案，因为上面的示例使用了Twinmax.js，由于某种奇怪的原因，我无法使其在我的项目中正常工作。

无论如何，这是我到目前为止所做的：

	// Random Stars
var generateStars = function(){
	

    
    var galaxy = $(".galaxy");
    var iterator = 0;
    
    while (iterator <= 500){
        var xposition = Math.random();
        var yposition = Math.random();
        var star_type = Math.floor((Math.random() * 3) + 1);
        var position = {
            "x" : $(window).width() * xposition,
            "y" : $(window).height() * yposition,
        };
        
        $('<div class="star star-type' + star_type + '" data-highlight="0" id="star-'+iterator+'"></div>').appendTo(galaxy).css({
            "top" : position.y,
            "left" : position.x
        });
        
        iterator++;
		
    }
    
};
	generateStars();
	
	
	

$(function(){
    setInterval(setImageOpacity, 2000); // Every 2 seconds call function setImageOpacity()
});

function  setImageOpacity() {
    var images = $('.star'); // Gets all images from the grid
    var currentIndex = -1;
    $.each(images, function (index, item) { // Loops through each image
        if ($(item).css('opacity') == 1) { // Checks the opacity of the current image
            currentIndex = index; // If opacity == 1 then thats the current index
            return false;
        }
    });

    var nextIndex = currentIndex;
    while (nextIndex == currentIndex) {
        nextIndex = Math.floor(Math.random() * images.length); // Will loop until a different index is found
    }

    images.eq(currentIndex).fadeTo(1000, 0); // The opacity animations
    images.eq(nextIndex).fadeTo(1000, 1);
}

@-webkit-keyframes twinkle_one {
  0%   { opacity: 1; }
  30%  { opacity: 1; }
  70%  { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes twinkle_one {
  0%   { opacity: 1; }
  30%  { opacity: 1; }
  70%  { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes twinkle_one {
  0%   { opacity: 1; }
  30%  { opacity: 1; }
  70%  { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes twinkle_one {
  0%   { opacity: 1; }
  30%  { opacity: 1; }
  70%  { opacity: 0; }
  100% { opacity: 1; }
}





@-webkit-keyframes twinkle_two {
  0%   { opacity: 1; }
  10%  { opacity: 0; }
  20%  { opacity: 0; }
  30%  { opacity: 0; }
  80%  { opacity: 0; }
  90%  { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes twinkle_two {
  0%   { opacity: 1; }
  10%  { opacity: 0; }
  20%  { opacity: 0; }
  30%  { opacity: 0; }
  80%  { opacity: 0; }
  90%  { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes twinkle_two {
  0%   { opacity: 1; }
  10%  { opacity: 0; }
  20%  { opacity: 0; }
  30%  { opacity: 0; }
  80%  { opacity: 0; }
  90%  { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes twinkle_two {
  0%   { opacity: 1; }
  10%  { opacity: 0; }
  20%  { opacity: 0; }
  30%  { opacity: 0; }
  40%  { opacity: 0; }
  50%  { opacity: 0; }
  60%  { opacity: 0; }
  70%  { opacity: 0; }
  80%  { opacity: 0; }
  90%  { opacity: 0; }
  100% { opacity: 1; }
}



@-webkit-keyframes twinkle_three {
  0%   { opacity: 1; }
  10%  { opacity: 0; }
  20%  { opacity: 0; }
  30%  { opacity: 0; }
  40%  { opacity: 0; }
  50%  { opacity: 0; }
  60%  { opacity: 0; }
  90%  { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes twinkle_three {
  0%   { opacity: 1; }
  10%  { opacity: 0; }
  20%  { opacity: 0; }
  30%  { opacity: 0; }
  40%  { opacity: 0; }
  50%  { opacity: 0; }
  60%  { opacity: 0; }
  90%  { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes twinkle_three {
  0%   { opacity: 1; }
  10%  { opacity: 0; }
  20%  { opacity: 0; }
  30%  { opacity: 0; }
  40%  { opacity: 0; }
  50%  { opacity: 0; }
  60%  { opacity: 0; }
  90%  { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes twinkle_three {
  0%   { opacity: 1; }
  10%  { opacity: 0; }
  20%  { opacity: 0; }
  30%  { opacity: 0; }
  40%  { opacity: 0; }
  50%  { opacity: 0; }
  60%  { opacity: 0; }
  90%  { opacity: 0; }
  100% { opacity: 1; }
}

.galaxy{
    z-index: 0;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 600px;
    margin: 0 auto;
    background:black;
}   
      .star{
        position: absolute;
        background-color: white;
		opacity: 0;
      }

      .star-type1{
        width: 1px;
        height: 1px;
        border-radius: 2px;
        -webkit-box-shadow: 0 0 1px 1px white;
                box-shadow: 0 0 1px 1px white;
       /* -webkit-animation: twinkle_one 3s ease-in-out infinite;
           -moz-animation: twinkle_one 3s ease-in-out infinite;
             -o-animation: twinkle_one 3s ease-in-out infinite;
                animation: twinkle_one 3s ease-in-out infinite;*/
      }
      .star-type2{
        width: 2px;
        height: 2px;
        border-radius: 2px;
        -webkit-box-shadow: 0 0 2px 1px white;
                box-shadow: 0 0 2px 1px white;
      /*  -webkit-animation: twinkle_two 12s ease-in-out infinite;
           -moz-animation: twinkle_two 12s ease-in-out infinite;
             -o-animation: twinkle_two 12s ease-in-out infinite;
                animation: twinkle_two 12s ease-in-out infinite;*/
      }
      .star-type3{
        width: 2px;
        height: 2px;
        border-radius: 2px;
        -webkit-box-shadow: 0 0 2px 0 white;
                box-shadow: 0 0 2px 0 white;
      /*  -webkit-animation: twinkle_three 7s ease-in-out infinite;
           -moz-animation: twinkle_three 7s ease-in-out infinite;
             -o-animation: twinkle_three 7s ease-in-out infinite;
                animation: twinkle_three 7s ease-in-out infinite;*/
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>

<div class="galaxy"></div>

如您所见，我的代码中有一个闪烁的效果，但与我在代码笔中显示的示例完全不同！

有人可以让我知道我如何实现这一目标吗？

谢谢。