User:Ayzkao/Meteor.css

.meteor { color: #fff; font-size: 1em; font-family: Arial, sans-serif; text-shadow: 0 0 5px #000; }

@keyframes meteors-fall { 0% {   top: -10%; } 100% {    top: 100%; } }

@keyframes meteors-shake { 0% {   transform: translateX(0px); } 50% {    transform: translateX(80px); } 100% {    transform: translateX(0px); } }

.meteor { position: fixed; top: -10%; z-index: 9999; user-select: none; cursor: default; animation-name: meteors-fall, meteors-shake; animation-duration: 10s, 3s; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-play-state: running, running; }

.meteor:nth-of-type(1) { left: 1%; animation-delay: 0s, 0s; }

/* Repeat the nth-of-type rules for the remaining meteors */