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
Selected Reading
Flash Animation Effect with CSS
The CSS flash animation effect creates a sudden brief burst of bright light by rapidly alternating an element's opacity between visible and invisible states. This creates a strobe-like flashing effect that draws attention to specific elements.
Syntax
@keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.flash {
animation: flash duration timing-function iteration-count;
}
Example
The following example demonstrates a flash animation effect applied to a colored box −
<!DOCTYPE html>
<html>
<head>
<style>
.flash-box {
width: 200px;
height: 100px;
background-color: #ff6b6b;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
margin: 20px auto;
border-radius: 10px;
animation: flash 2s infinite;
}
@keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="flash-box">Flash Effect</div>
</body>
</html>
A red box with white text "Flash Effect" appears and flashes repeatedly, alternating between fully visible and invisible states every 0.5 seconds.
Customizing Flash Speed
You can control the flash speed by adjusting the animation duration −
<!DOCTYPE html>
<html>
<head>
<style>
.flash-fast {
width: 150px;
height: 50px;
background-color: #4ecdc4;
color: white;
text-align: center;
line-height: 50px;
margin: 10px;
border-radius: 5px;
animation: flash 0.5s infinite;
}
.flash-slow {
width: 150px;
height: 50px;
background-color: #45b7d1;
color: white;
text-align: center;
line-height: 50px;
margin: 10px;
border-radius: 5px;
animation: flash 3s infinite;
}
@keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="flash-fast">Fast Flash</div>
<div class="flash-slow">Slow Flash</div>
</body>
</html>
Two boxes appear: a teal box flashing rapidly (0.5s cycle) and a blue box flashing slowly (3s cycle), demonstrating different animation speeds.
Conclusion
The flash animation effect uses opacity transitions at specific keyframe intervals to create attention-grabbing strobe effects. Adjust the animation duration to control the flash speed for different visual impacts.
Updated on: 2026-03-15T11:48:30+05:30
340 Views
Advertisements