Hello Friends, Today we are going to create a glow flicker animation using CSS. Glow Flicker means a blinking of light. It is used for making things attractive on the website.
Also Read – 3D Carousel Using HTML and CSS only
So, here we provide a complete explanation with source code on creating this amazing Glow Flicker Animation with HTML, and CSS.
HTML
HTML is used to give a structure to our Glow Flicker.
<div id="text">
<h1>O<span id="offset">P</span>EN</h1>
</div>In the HTML Section
- First, we set a div tag with the id “text”.
- Second, we set a “h1” tag inside the div tag.
- Third we set a span tag with id “offset” inside the “h1” tag.
CSS
Now the time of our CSS, we design and give animation to our Glowing Flicker. We Divide CSS Codes into parts to understand it briefly.
Import Font and Styling the Body
@import url('https://fonts.googleapis.com/css?family=Raleway');
body {
background-color:black;
}
Here, we used “@import” to import the ‘Raleway‘ font from Google Fonts. We style the body of the HTML Document with a black background.
styling the Container (div)
div {
text-align:center;
position:absolute;
border:5px solid #1086e8;
width:300px;
top:150px;
border-radius:20px;
left:50%;
margin: -50px 0 0 -150px;
animation: border-flicker 2s linear infinite;
}
Here we design a “div” container with center alignment, an absolute position, a solid blue border, and rounder corners. The main thing animation property is applied to the “border-flicker” animation, creating a flickering effect on the border.
Styling the Heading (h1)
h1 {
color:#FF00E6;
font-family: 'Raleway', sans-serif;
font-size:64px;
letter-spacing:10px;
animation: text-flicker 3s linear infinite;
}
Here we designed our Heading with a Pink Color, the “Raleway” font, 64px of Font size, and also set the letter spacing. And the “text-flicker” animation is applied, making the text flicker and creating a shadow effect.
#offset
#offset {
animation: letter-flicker 2s linear infinite;
}
Here we set the “letter-flicker” animation to the element with the ID “offset” The animation will run for 2 seconds (2s), follow a linear timing function, and continue indefinitely (infinite).
Text Flickering Animations
@keyframes text-flicker {
0% {
opacity:0.1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
}
2% {
opacity:1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
}
8% {
opacity:0.1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
}
9% {
opacity:1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
}
12% {
opacity:0.1;
text-shadow: 0px 0px rgba(242, 22, 22, 1);
}
20% {
opacity:1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
}
25% {
opacity:0.3;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
}
30% {
opacity:1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
}
70% {
opacity:0.7;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
}
72% {
opacity:0.2;
text-shadow:0px 0px 29px rgba(242, 22, 22, 1)
}
77% {
opacity:.9;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
}
100% {
opacity:.9;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
}
}
This section defines the keyframes for the “text-flicker” animation, controlling the opacity and text-shadow properties of the entire heading.
Border Flickering Animations
@keyframes border-flicker {
0% {
opacity:0.1;
-webkit-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
-moz-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
}
2% {
opacity:1;
-webkit-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
-moz-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
}
4% {
opacity:0.1;
-webkit-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
-moz-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
}
8% {
opacity:1;
-webkit-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
-moz-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
}
70% {
opacity:0.7;
-webkit-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
-moz-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
}
100% {
opacity:1;
-webkit-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
-moz-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
}
}
Here we define keyframes for the “border-flicker” controlling the opacity and shadow properties of the container’s border. This combination of keyframes creates a flickering effect on the container border.
Letter Flickering Animation
@keyframes letter-flicker {
0% {
opacity:0.1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
}
2% {
opacity:0.1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
}
4% {
opacity:1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
}
19% {
opacity:1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
}
21% {
opacity:0.1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
}
23% {
opacity:1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
}
80% {
opacity:1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
}
83% {
opacity:0.4;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
}
87% {
opacity:1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
}
}
Here we define the keyframes for the “letter-flicker” animation. We set keyframes at various percentages of the animation duration, controlling the opacity and text-shadow properties that create the flickering effect on individual letters.
Source Code
See the Pen Glow Flicker by Kevin (@KevinOgden) on CodePen.
Conclusion
Here you learn about how we create an amazing and attractive Flicker Glowing Effect on any Words with animation and keyframes rules of HTML, and CSS. This is the most basic thing that is used to make a more attractive website.
