Skip to content

Instantly share code, notes, and snippets.

@AksAman

AksAman/animated-noise.css

Created June 12, 2024 07:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save AksAman/80be6a34d5a4610c0983fe9b79909c12 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save AksAman/80be6a34d5a4610c0983fe9b79909c12 to your computer and use it in GitHub Desktop.
Download ZIP
Noise Animation with CSS
Raw
animated-noise.css
.noise::before {
content: "";
z-index: 20;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/jpeg;base64,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");
opacity: 0.2;
animation: 0.1s infinite noise;
pointer-events: none;
}
@keyframes noise {
0%,
100% {
background-position: 0 0;
}
10% {
background-position: -5% -10%;
}
20% {
background-position: -15% 5%;
}
30% {
background-position: 7% -25%;
}
40% {
background-position: 20% 25%;
}
50% {
background-position: -25% 10%;
}
60% {
background-position: 15% 5%;
}
70% {
background-position: 0 15%;
}
80% {
background-position: 25% 35%;
}
90% {
background-position: -10% 10%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment