Hello Friends, Today in this post, we’ll learn How to Create an Amazing Pure CSS Shooting Stars Animation Effects. recently I have shared Responsive E-Commerce Product Card Design using HTML & CSS. but our today’s topic is Amazing Pure CSS Shooting Stars Animation Effects.

I’ve fallen into the habit of creating CSS animations in my free time, inspired by things I come across during the day. To create the animations as I imagine them using as few elements as possible, I’ve found some tricks to make CSS do things you might not know it could do. I’d like to share them with you.

CSS animation makes it easy to transition properties to a new value over time. They also have the ability to jump properties to a new value virtually instantly. The trick is to use two keyframes with a very small difference, around .001% works well.

Pure CSS Shooting Stars Animation a great example of a loading screen gif that catches your attention for long enough for the rest of the content to load. It depicts a rotating circle surrounded by a mysterious smoke that you can’t help but watch for a moment. And a moment is really all it takes.

The Pure CSS Shooting Stars Animation can be easily generated using HTML and CSS. The Loader Ring displays when the browsers are loading web pages. To create a loader ring, we will make the use of CSS animations that allows animation of HTML elements.

HTML Code is used to create a basic structure of the animated loader ring and CSS code is used to set the style of the Loader Ring. We will use the @keyframes rule that allows the animation to gradually change from the current style to the new style at certain times.

Play Video

In some cases, it is unavoidable to let the users wait for a brief moment for all the data and pages to load. In moments like that, you need something to get the user’s attention and keep them on the site long enough for all the content to load.

One way to do that is by adding an eye-catching loading animation or loading gif to the site to keep the users entertained while they are waiting for the rest of the site to load.

I like to think that the future is already here. We have already so many exciting possibilities in CSS and SVG that some time ago we could only dream about. For example, we now have many possible ways to create text with an animated fill!

About a year ago the article Techniques for creating textured text by Sara Soueidan was published here on Codrops. This wonderful article will tell you all about the different methods for creating textured text with some modern web techniques including canvas.

I’m very interested in this Pure CSS Shooting Stars Animation but from a different perspective. I have the following questions: Can the text fill be animated? Can we fill the text with animated shadows or gradients? Or what about using videos for filling the text?

For any doubts and queries, feel free to leave comments below. Remember to subscribe to our channel. Do share the tutorial if you think it’s worth it.

HTML

CSS

body { 
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  font-family: "Anton", sans-serif;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
    background-image: url(images/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.5;
}

.night {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}

.shooting_star {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 2px;
  background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
  border-radius: 999px;
  -webkit-filter: drop-shadow(0 0 6px #699bff);
          filter: drop-shadow(0 0 6px #699bff);
  -webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
          animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
}
.shooting_star::before, .shooting_star::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  height: 2px;
  background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
  -webkit-transform: translateX(50%) rotateZ(45deg);
          transform: translateX(50%) rotateZ(45deg);
  border-radius: 100%;
  -webkit-animation: shining 3000ms ease-in-out infinite;
          animation: shining 3000ms ease-in-out infinite;
}
.shooting_star::after {
  -webkit-transform: translateX(50%) rotateZ(-45deg);
          transform: translateX(50%) rotateZ(-45deg);
}
.shooting_star:nth-child(1) {
  top: calc(50% - -119px);
  left: calc(50% - 43px);
  -webkit-animation-delay: 4796ms;
          animation-delay: 4796ms;
}
.shooting_star:nth-child(1)::before, 
.shooting_star:nth-child(1)::after {
  -webkit-animation-delay: 4796ms;
          animation-delay: 4796ms;
}
.shooting_star:nth-child(2) {
  top: calc(50% - -43px);
  left: calc(50% - 37px);
  -webkit-animation-delay: 5944ms;
          animation-delay: 5944ms;
}
.shooting_star:nth-child(2)::before, 
.shooting_star:nth-child(2)::after{
  -webkit-animation-delay: 5944ms;
          animation-delay: 5944ms;
}
.shooting_star:nth-child(3) {
  top: calc(50% - -40px);
  left: calc(50% - 222px);
  -webkit-animation-delay: 7556ms;
          animation-delay: 7556ms;
}
.shooting_star:nth-child(3)::before, 
.shooting_star:nth-child(3)::after {
  -webkit-animation-delay: 7556ms;
          animation-delay: 7556ms;
}
.shooting_star:nth-child(4) {
  top: calc(50% - -29px);
  left: calc(50% - 113px);
  -webkit-animation-delay: 7123ms;
          animation-delay: 7123ms;
}
.shooting_star:nth-child(4)::before, 
.shooting_star:nth-child(4)::after{
  -webkit-animation-delay: 7123ms;
          animation-delay: 7123ms;
}
.shooting_star:nth-child(5) {
  top: calc(50% - 146px);
  left: calc(50% - 112px);
  -webkit-animation-delay: 3629ms;
          animation-delay: 3629ms;
}
.shooting_star:nth-child(5)::before, 
.shooting_star:nth-child(5)::after{
  -webkit-animation-delay: 3629ms;
          animation-delay: 3629ms;
}
.shooting_star:nth-child(6) {
  top: calc(50% - -108px);
  left: calc(50% - 160px);
  -webkit-animation-delay: 3895ms;
          animation-delay: 3895ms;
}
.shooting_star:nth-child(6)::before, 
.shooting_star:nth-child(6)::after {
  -webkit-animation-delay: 3895ms;
          animation-delay: 3895ms;
}
.shooting_star:nth-child(7) {
  top: calc(50% - 52px);
  left: calc(50% - 72px);
  -webkit-animation-delay: 7326ms;
          animation-delay: 7326ms;
}
.shooting_star:nth-child(7)::before, 
.shooting_star:nth-child(7)::after{
  -webkit-animation-delay: 7326ms;
          animation-delay: 7326ms;
}
.shooting_star:nth-child(8) {
  top: calc(50% - 55px);
  left: calc(50% - 282px);
  -webkit-animation-delay: 956ms;
          animation-delay: 956ms;
}
.shooting_star:nth-child(8)::before, 
.shooting_star:nth-child(8)::after {
  -webkit-animation-delay: 956ms;
          animation-delay: 956ms;
}
.shooting_star:nth-child(9) {
  top: calc(50% - 129px);
  left: calc(50% - 296px);
  -webkit-animation-delay: 5030ms;
          animation-delay: 5030ms;
}
.shooting_star:nth-child(9)::before, 
.shooting_star:nth-child(9)::after{
  -webkit-animation-delay: 5030ms;
          animation-delay: 5030ms;
}
.shooting_star:nth-child(10) {
  top: calc(50% - 131px);
  left: calc(50% - 249px);
  -webkit-animation-delay: 1150ms;
          animation-delay: 1150ms;
}
.shooting_star:nth-child(10)::before, 
.shooting_star:nth-child(10)::after {
  -webkit-animation-delay: 1150ms;
          animation-delay: 1150ms;
}
.shooting_star:nth-child(11) {
  top: calc(50% - 32px);
  left: calc(50% - 13px);
  -webkit-animation-delay: 157ms;
          animation-delay: 157ms;
}
.shooting_star:nth-child(11)::before, 
.shooting_star:nth-child(11)::after {
  -webkit-animation-delay: 157ms;
          animation-delay: 157ms;
}
.shooting_star:nth-child(12) {
  top: calc(50% - -57px);
  left: calc(50% - 165px);
  -webkit-animation-delay: 3364ms;
          animation-delay: 3364ms;
}
.shooting_star:nth-child(12)::before, 
.shooting_star:nth-child(12)::after{
  -webkit-animation-delay: 3364ms;
          animation-delay: 3364ms;
}
.shooting_star:nth-child(13) {
  top: calc(50% - 189px);
  left: calc(50% - 213px);
  -webkit-animation-delay: 6822ms;
          animation-delay: 6822ms;
}
.shooting_star:nth-child(13)::before, 
.shooting_star:nth-child(13)::after {
  -webkit-animation-delay: 6822ms;
          animation-delay: 6822ms;
}
.shooting_star:nth-child(14) {
  top: calc(50% - -104px);
  left: calc(50% - 163px);
  -webkit-animation-delay: 9347ms;
          animation-delay: 9347ms;
}
.shooting_star:nth-child(14)::before, 
.shooting_star:nth-child(14)::after{
  -webkit-animation-delay: 9347ms;
          animation-delay: 9347ms;
}
.shooting_star:nth-child(15) {
  top: calc(50% - -75px);
  left: calc(50% - 234px);
  -webkit-animation-delay: 4661ms;
          animation-delay: 4661ms;
}
.shooting_star:nth-child(15)::before, 
.shooting_star:nth-child(15)::after {
  -webkit-animation-delay: 4661ms;
          animation-delay: 4661ms;
}
.shooting_star:nth-child(16) {
  top: calc(50% - 176px);
  left: calc(50% - 51px);
  -webkit-animation-delay: 6650ms;
          animation-delay: 6650ms;
}
.shooting_star:nth-child(16)::before, 
.shooting_star:nth-child(16)::after {
  -webkit-animation-delay: 6650ms;
          animation-delay: 6650ms;
}
.shooting_star:nth-child(17) {
  top: calc(50% - -127px);
  left: calc(50% - 171px);
  -webkit-animation-delay: 3855ms;
          animation-delay: 3855ms;
}
.shooting_star:nth-child(17)::before, 
.shooting_star:nth-child(17)::after {
  -webkit-animation-delay: 3855ms;
          animation-delay: 3855ms;
}
.shooting_star:nth-child(18) {
  top: calc(50% - -130px);
  left: calc(50% - 295px);
  -webkit-animation-delay: 6509ms;
          animation-delay: 6509ms;
}
.shooting_star:nth-child(18)::before, 
.shooting_star:nth-child(18)::after{
  -webkit-animation-delay: 6509ms;
          animation-delay: 6509ms;
}
.shooting_star:nth-child(19) {
  top: calc(50% - -108px);
  left: calc(50% - 209px);
  -webkit-animation-delay: 1403ms;
          animation-delay: 1403ms;
}
.shooting_star:nth-child(19)::before, 
.shooting_star:nth-child(19)::after{
  -webkit-animation-delay: 1403ms;
          animation-delay: 1403ms;
}
.shooting_star:nth-child(20) {
  top: calc(50% - -19px);
  left: calc(50% - 9px);
  -webkit-animation-delay: 5083ms;
          animation-delay: 5083ms;
}
.shooting_star:nth-child(20)::before, 
.shooting_star:nth-child(20)::after{
  -webkit-animation-delay: 5083ms;
          animation-delay: 5083ms;
}

@-webkit-keyframes tail {
  0% {
    width: 0;
  }
  30% {
    width: 100px;
  }
  100% {
    width: 0;
  }
}

@keyframes tail {
  0% {
    width: 0;
  }
  30% {
    width: 100px;
  }
  100% {
    width: 0;
  }
}
@-webkit-keyframes shining {
  0% {
    width: 0;
  }
  50% {
    width: 30px;
  }
  100% {
    width: 0;
  }
}
@keyframes shining {
  0% {
    width: 0;
  }
  50% {
    width: 30px;
  }
  100% {
    width: 0;
  }
}
@-webkit-keyframes shooting {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(300px);
            transform: translateX(300px);
  }
}
@keyframes shooting {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(300px);
            transform: translateX(300px);
  }
}

3 thoughts on “Amazing Pure CSS Shooting Stars Animation Effects.”

Molly says:

September 28, 2021 at 7:46 am

We are a group of volunteers and opening a new scheme in our community. Your website offered us valuable more info to work on.

https://www.yamatocosmos.com says:

October 1, 2021 at 8:36 pm

Best view i have ever seen !

Connie says:

October 3, 2021 at 12:18 pm

Terrific post. Articles that have significant as well as informative web content are more satisfying.

Amazing Pure CSS Shooting Stars Animation Effects.

HTML

CSS

3 thoughts on “Amazing Pure CSS Shooting Stars Animation Effects.”

Leave a Reply Cancel reply

Responsive Food And Restaurant Website Using Bootstrap 5 | Bootstrap 5 Responsive Website Design

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

Responsive Food And Restaurant Website Using Bootstrap 5 | Bootstrap 5 Responsive Website Design

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)