CSS3 Achieve meteor Fall effect

HTML code

<div class= "star" ></div>      <div class= "star Pink" ></div>      <div class= "Star Blue" ></div>

CSS Code

. star {Display:block;    width:5px;    height:5px;    border-radius:50%;    Background: #FFF;    top:100px;    left:500px;    position:relative;    transform-origin:100% 0;    Animation:star-ani 4s linear infinite;    -webkit-animation:star-ani 5s linear Infinite;    box-shadow:0 0 5px 5px rgba (255, 255, 255,. 3);    opacity:0; Z-index:2;}.    Star:after {content: ';    Display:block;    top:0px;    left:4px;    border:0px solid #fff;    border-width:0px 90px 2px 90px;    Border-color:transparent Transparent transparent RGBA (255, 255, 255,. 3);    Transform:rotate ( -45deg) Translate3d (1px, 3px, 0);    box-shadow:0 0 1px 0 rgba (255, 255, 255,. 1);    transform-origin:0% 100%; Animation:shooting-ani 3s infinite ease-out;}.    Pink {top:100px;    left:800px;    Background: #fff;    animation-delay:3s;    -webkit-animation-delay:3s; -moz-animation-delay:3s;}.    Pink:after {border-color:transparent transparent transparent #fff; Animation-delay:3S    -webkit-animation-delay:3s; -moz-animation-delay:3s;}.    blue {top:120px;    left:1200px;    BACKGROUND:FFF;    animation-delay:7s;    -webkit-animation-delay:7s; -moz-animation-delay:7s;}.    Blue:after {border-color:transparent transparent transparent fff;    -webkit-animation-delay:7s;    -moz-animation-delay:7s;  animation-delay:7s;}        @keyframes Star-ani {0% {opacity:0;    Transform:scale (0) translate3d (0, 0, 0);        } 20%{opacity:0.8;    Transform:scale (0.2) Translate3d ( -100px, 100px, 0);        } 40% {opacity:0.8;    Transform:scale (0.4) Translate3d ( -200px, 200px, 0);        } 60% {opacity:0.8;    Transform:scale (0.6) Translate3d ( -300px, 300px, 0);        } 80% {opacity:1;    Transform:scale (1) translate3d ( -350px, 350px, 0);        } 100% {opacity:1;    Transform:scale (1.2) Translate3d ( -400px, 380px, 0); }}

CSS3 Achieve meteor Fall effect