How to create candle animation effect with CSS
How to Create a Candle Animation Effect with CSS
Web animations can be found on all sorts of web pages. They can be small web animations that happen as visitors scroll on a page to draw attention to a certain aspect, animations that demonstrate a product, or promotional web animations that showcase something in a fun and engaging way.
Modern online animation technology has advanced significantly over the past 20 years – performance, available bandwidth, and rendering quality have all improved. However, designers should proceed with caution and only incorporate animation into websites if it can substantially improve the user experience.
Web animation can be used to grab viewers’ attention, keep them engaged, and communicate more effectively. Unlike static web pages, it has the potential to capture and hold people’s attention for longer periods of time. The user experience should be supported by web animation that is fluid, meaningful, and flowing. Compared to static web pages, it has the potential to capture and hold viewers’ attention for longer periods of time and communicate information more clearly and effectively.
In this article, we’ll create a candle animation effect using pure CSS. Here, we’ll use CSS animations and some other properties to create a flickering and glowing candle flame effect.
Candle Animation
We used the following CSS properties to create this effect.
- :before and :after pseudo-classes – These are used to add something before or after the content of a selected element. Pseudo-classes are used to style specific parts of an element.
-
CSS Animation – CSS animation properties allow us to animate various style properties of an element over a set time interval.
-
@keyframes – This is used to specify exactly what happens in an animation during a given period of time. This is achieved by specifying CSS properties for specific “frames” of the animation, with percentages ranging from 0% (the start of the animation) to 100% (the end of the animation).
-
ScrollBehavior – The scrollbehavior property indicates whether the scroll position should animate smoothly instead of jumping when the user clicks a link within the scrollable frame.
-
**Background** – It enables developers to add background effects to elements.
-
Box-shadow – This property allows developers to add shadows to elements.
-
Border-radius – This property is used to define the radius of an element.
-
Transform – This property is used to add 2D or 3D transformations to an element. It allows you to rotate, scale, translate, move, skew, and more.
-
Z-index – This property is used to set the Z-order of positioned elements.
-
Opacity – This property is used to specify the transparency or opacity of an element.
-
filter – The filter property allows developers to create visual effects (such as contrast, blur, and saturation) for an element.
Syntax
filter: none | saturate() | blur() | contrast() | drop-shadow() | hue-rotate() | invert() | opacity() | grayscale() | sepia() | url() | brightness();
Steps to Follow
-
Create a container div class.
-
Within the container class, create another class for the candle.
-
In it, we’ll create four classes to create the wick, flame, flickering effect, and glow of the flame.
-
Using the :before and :after pseudo-classes, we’ll create the flame and candle.
-
Using CSS animations, we’ll give the candle a glowing effect.
Example
The following example demonstrates how to animate a candle.
<!DOCTYPE html>
<html>
<head>
<title> Candle Animation </title>
<style>
html { font-size: 11px;}
body { background: black;}
.center {
width: 100px;
margin: 2px auto 2px;
}
.stand {
position: relative;
margin: 11rem auto 0;
width: 130px;
height: 400px;
}
.wax {
bottom: 0;
top: 0;
left: 47%;
width: 180px;
height: 270px;
border-radius: 150px / 40px;
box-shadow: inset 10px -40px 20px 10px rgba(0, 0.3, 0.7, 0.3), inset -50px 0 60px 10px rgba(0, 1.0, 2.5, 0.7);
background: #190f02;
background: linear-gradient(#e47825, #ee8e0e, #633c73, #4c7a03 30%, #1c0960);
}
.flutter {
width: 60px;
height: 90px;
left: 53%;
top: 35rem;
bottom: 100%;
position: absolute;
transform: translate(-40%);
border-radius: 50%;
background: #ff6100;
filter: blur(40px);
animation: flutter 0.2s infinite;
}
@keyframes flutter {
40% {opacity: 0.6;}
}
.candlewick {
width: 10px;
height: 46px;
position: absolute;
top: 45rem;
left: 55%;
z-index: 1;
border-radius: 30% 30% 10% 5%;
transform: translate(-50%);
background: #131312;
background: linear-gradient(#d6894a, #4b532c, #131312, brown, #e8cb31 70%);
}
.blaze {
width: 30px;
height: 110px;
left: 55%;
top: 34rem;
position: absolute;
transform-origin: 52% 120%;
transform: translate(-40%);
border-radius: 51% 55% 22% 20%;
background: rgba(254, 254, 254, 1);
background: linear-gradient(white 70%, transparent);
animation: blaze1 5s linear infinite, blaze2 6s linear infinite;
}
@keyframes blaze2 {
0% {transform: translate(-40%) rotate(-3deg);}
50% {transform: translate(-40%) rotate(3deg);}
100% {transform: translate(-40%) rotate(-3deg);}
}
@keyframes blaze1 {
0%, 100% {height: 138px;}
50% {height: 158px;}
100% {height: 138px; }
}
.blue {
width: 30px;
height: 70px;
position: absolute;
border-radius: 51% 51% 45% 45%;
left: 55%;
top: 42rem;
transform: translate(-40%);
background: rgba(1, 123, 253, .6);
box-shadow: 1px -30px 40px 1px #dc8a0c, 1px 40px 50px 1px #dc8a0c, inset 4px 1px 5px 1px rgba(1, 123, 253, .7), inset -2px 1px 3px 1px rgba(1, 123, 253, .7);
}
</style>
</head>
<body>
<section class="center">
<p class= "stand">
<p class= "wax">
<p class= "flutter"> </p>
<p class= "candlewick"> </p>
<p class= "blue"> </p>
<p class= "blaze"> </p>
</p>
</p>
</section>
</body>
</html>
Summary
In this article, we’ve seen how to create a simple burning candle animation using only HTML and CSS.