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 Candle Animation effect using CSS?
The CSS candle animation effect creates a realistic flickering candle using pure CSS animations, transforms, and gradients. This effect combines multiple animated elements to simulate the flame's natural movement, glow, and color variations.
Syntax
@keyframes animationName {
0% { property: value; }
50% { property: value; }
100% { property: value; }
}
.element {
animation: animationName duration timing-function iteration-count;
filter: blur(value);
box-shadow: inset values, outer values;
}
Key CSS Properties Used
@keyframes Defines animation sequences for flame movement and flickering effects
animation Applies the keyframe animations to elements with duration and timing
filter: blur() Creates the soft glow effect around the flame
box-shadow Adds inner and outer shadows for depth and lighting effects
border-radius Shapes the candle wax and flame with rounded corners
linear-gradient Creates realistic color transitions for wax and flame
transform Positions and rotates elements for natural flame movement
Example: Animated Candle with Flickering Flame
The following example creates a complete candle animation with flickering flame, glowing effects, and realistic colors
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #1a1a1a;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.candle-container {
position: relative;
width: 100px;
height: 300px;
}
.candle-body {
width: 60px;
height: 200px;
background: linear-gradient(#e47825, #ee8e0e, #4c3c73);
border-radius: 50px 50px 10px 10px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
box-shadow: inset -20px 0 30px rgba(0, 0, 0, 0.3);
}
.wick {
width: 4px;
height: 20px;
background: linear-gradient(#333, #111);
position: absolute;
top: 75px;
left: 50%;
transform: translateX(-50%);
border-radius: 2px;
}
.flame {
width: 20px;
height: 40px;
background: linear-gradient(white 30%, orange 70%, red);
border-radius: 50% 50% 30% 30%;
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
animation: flicker 0.5s infinite alternate;
}
.flame-glow {
width: 40px;
height: 60px;
background: radial-gradient(orange, transparent);
border-radius: 50%;
position: absolute;
top: 35px;
left: 50%;
transform: translateX(-50%);
filter: blur(10px);
animation: glow 1s infinite alternate;
}
.flame-core {
width: 12px;
height: 25px;
background: rgba(0, 100, 255, 0.7);
border-radius: 50% 50% 40% 40%;
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
animation: flicker 0.3s infinite alternate-reverse;
}
@keyframes flicker {
0% {
transform: translateX(-50%) rotate(-2deg) scaleY(1);
opacity: 1;
}
100% {
transform: translateX(-50%) rotate(2deg) scaleY(1.1);
opacity: 0.8;
}
}
@keyframes glow {
0% {
opacity: 0.6;
transform: translateX(-50%) scale(1);
}
100% {
opacity: 1;
transform: translateX(-50%) scale(1.2);
}
}
</style>
</head>
<body>
<div class="candle-container">
<div class="candle-body"></div>
<div class="wick"></div>
<div class="flame-glow"></div>
<div class="flame"></div>
<div class="flame-core"></div>
</div>
</body>
</html>
An animated candle appears with a flickering orange flame that sways gently side to side. The flame has a blue core and orange glow effect that pulsates. The candle body shows realistic wax colors with gradient shading.
Animation Breakdown
Flame Flicker Effect
The flickering animation uses rotation and scale transforms
@keyframes flicker {
0% { transform: rotate(-2deg) scaleY(1); }
100% { transform: rotate(2deg) scaleY(1.1); }
}
Glow Pulsation
The glow effect uses opacity and scale changes
@keyframes glow {
0% { opacity: 0.6; transform: scale(1); }
100% { opacity: 1; transform: scale(1.2); }
}
Conclusion
CSS candle animation combines multiple layered elements with keyframe animations to create realistic flame effects. The combination of transforms, filters, and gradients produces a convincing flickering candle that enhances web page ambiance.
971 Views
