Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create Shooting Star Animation effect using CSS?
Shooting stars create a mesmerizing visual effect that simulates meteors streaking across a night sky. This CSS animation technique is perfect for creating engaging backgrounds, loading screens, or atmospheric effects on dark-themed websites.
In this article, we will create a shooting star animation effect using CSS properties like transform, animation, :nth-child selectors, and ::before pseudo-elements to achieve realistic meteor trails.
Syntax
.shooting-star {
animation: shoot duration timing-function iteration-count;
transform: rotate(angle) translateX(distance);
}
@keyframes shoot {
0% { transform: rotate(angle) translateX(0); opacity: 1; }
100% { transform: rotate(angle) translateX(-distance); opacity: 0; }
}
Key CSS Properties Used
| Property | Purpose |
|---|---|
transform |
Controls rotation and movement direction |
:nth-child(n) |
Targets specific stars for different timings |
::before |
Creates the trailing tail effect |
box-shadow |
Adds glowing aura around the star |
linear-gradient |
Creates fading tail from bright to transparent |
Example: Basic Shooting Star Animation
The following example creates multiple shooting stars with different timings and positions
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #000;
height: 100vh;
overflow: hidden;
}
.sky {
position: relative;
width: 100%;
height: 100vh;
}
.shooting-star {
position: absolute;
width: 4px;
height: 4px;
background: white;
border-radius: 50%;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
0 0 20px rgba(255, 255, 255, 0.4),
0 0 30px rgba(255, 255, 255, 0.2);
}
.shooting-star::before {
content: '';
position: absolute;
top: 50%;
right: 4px;
width: 200px;
height: 1px;
background: linear-gradient(90deg, rgba(255,255,255,1), transparent);
transform: translateY(-50%);
}
@keyframes shoot {
0% {
transform: rotate(-45deg) translateX(0);
opacity: 1;
}
100% {
transform: rotate(-45deg) translateX(-1000px);
opacity: 0;
}
}
.shooting-star:nth-child(1) {
top: 20%;
right: 0;
animation: shoot 3s linear infinite;
animation-delay: 0s;
}
.shooting-star:nth-child(2) {
top: 40%;
right: 100px;
animation: shoot 4s linear infinite;
animation-delay: 1s;
}
.shooting-star:nth-child(3) {
top: 60%;
right: 200px;
animation: shoot 2.5s linear infinite;
animation-delay: 2s;
}
</style>
</head>
<body>
<div class="sky">
<div class="shooting-star"></div>
<div class="shooting-star"></div>
<div class="shooting-star"></div>
</div>
</body>
</html>
A black night sky with three white shooting stars moving diagonally from top-right to bottom-left at different speeds and timings. Each star has a glowing tail that fades from bright white to transparent.
Enhanced Version with Random Positioning
This example creates more realistic shooting stars with varied sizes and random animation delays
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
height: 100vh;
overflow: hidden;
}
.meteor {
position: absolute;
width: 2px;
height: 2px;
background: #fff;
border-radius: 50%;
animation: meteor 5s linear infinite;
}
.meteor::before {
content: '';
position: absolute;
top: 50%;
right: 2px;
height: 1px;
background: linear-gradient(90deg, #fff, transparent);
transform: translateY(-50%);
animation: tail 5s linear infinite;
}
@keyframes meteor {
0% {
transform: rotate(-45deg) translateX(0);
opacity: 1;
}
70% {
opacity: 1;
}
100% {
transform: rotate(-45deg) translateX(-800px);
opacity: 0;
}
}
@keyframes tail {
0% {
width: 0;
}
30% {
width: 150px;
}
100% {
width: 0;
}
}
.meteor:nth-child(1) {
top: 10%;
right: 10%;
animation-delay: 0.5s;
animation-duration: 4s;
}
.meteor:nth-child(2) {
top: 30%;
right: 30%;
animation-delay: 1.2s;
animation-duration: 3s;
}
.meteor:nth-child(3) {
top: 50%;
right: 20%;
animation-delay: 2.1s;
animation-duration: 5s;
}
.meteor:nth-child(4) {
top: 70%;
right: 40%;
animation-delay: 0.8s;
animation-duration: 3.5s;
}
</style>
</head>
<body>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
</body>
</html>
A dark blue gradient night sky background with four shooting stars appearing at different times and positions. The meteors have animated tails that grow and shrink as they streak across the sky, creating a realistic meteor shower effect.
Key Implementation Points
Star Creation: Use small circular elements with border-radius: 50% and white background for the meteor head.
Tail Effect: The ::before pseudo-element creates the trailing effect using linear-gradient from white to transparent.
Movement: Combine rotate(-45deg) with translateX() to create diagonal movement from top-right to bottom-left.
Timing Variation: Use different animation-delay and animation-duration values for each star to avoid synchronized movement.
Conclusion
The shooting star animation effect adds a captivating atmospheric touch to websites. By combining CSS transforms, gradients, and carefully timed animations, you can create realistic meteor trails that enhance user experience and visual appeal.
2K+ Views
