Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create Candle Animation effect using CSS?
Web animation can be seen on a variety of web pages. They can be little web animations that occur while a visitor scrolls across a web page to draw attention to an aspect, an animation that demonstrates a product, or a promotional web animation that shows off something in an interesting and engaging manner.
In the past 20 years, modern online animation technology has advanced significantly— performance, available bandwidth, and rendering quality have all improved. Designers should use caution, though, and should only incorporate animation into a website if it materially improves the user experience.
Web animation may be used to grab viewers' attention, keep them interested longer, and communicate more effectively. Unlike a static web page, it may captivate and keep people's attention for a longer amount of time. The user experience should be supported by web animation that is smooth, meaningful, and flowing. Compared to a static web page, it may captivate and maintain viewers' attention for longer and be able to more clearly and effectively convey a message.
In this article, we will create a Candle Animation effect using pure CSS. Here, we will use CSS animations and some other properties to create the blinking and glowing effect of the flame of the candle.
Candle Animation
We have used the following properties of CSS for creating such an effect.
:before and :after pseudo class- It is used to add something before or after the content of the selected element. Pseudo classes are used to style the specified parts of an elements.
CSS Animations- The animation property of CSS allows us to change various styling properties to an element during a certain interval of time which gives it an animating effect.
@keyframes- It is used to specify exactly what happens within the animation during the given time duration. This is done by stating the CSS properties for certain specific ‘frames’ during the animation, with percent from 0% (beginning of animation) to 100% (ending of animation).
Scroll behavior- When a user clicks on a link within a scrollable box, the scrollbehavior attribute indicates whether the scroll position should be smoothly animated rather than a straight jump.
Background- It enables the developers to add background effects to the elements
Box-shadow- It enables the developers to add shadow to the elements.
Border-radius- It is used to define the radius of the elements.
Transform- This property is used to add 2D or 3D transformation to an element. It allows you to rotate, scale, translate, move, skew, etc., elements.
Z-index– It is used to set the z-order of positioned elements.
Opacity- It is used to specify the transparency or opacity of the element.
Filter- The filter property enables the 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 be followed
Create a container div class.
Within the container class, create another class for the candle.
Within it, we will create 4 classes for creating the wick, flame, blinking effect and the glow of the flame.
Using :before and :after pseudo class, create the flame and the candle.
Use CSS animations for giving the glowing effect to the candle.
Example
The following example demonstrates how to create Candle animation effect.
<!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>
Conclusion
In this article, we have seen how we can create simple burning candle animation by only using HTML and CSS.
434 Views
