Open In App

How to create Candle Animation using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

To create Candle animation, we take the basic approach of Pure CSS., Here we are using some animation techniques like move and rotate to create the Candle more effectively.

Approach: First we create a container class. In container class, we create another class named candle-body and in this class, we create another two class candle-stick and candle-flames. In the candle-body selector, we set the height and width of the candle body. To add the stick in the candle body, we use some CSS properties in the candle-stick selector after that we add candle flames we add some animation in the  candle-flames selector like move and rotate. We are describing some properties and selectors which we have used in the CSS file:

  • background: It is used to add background effects for elements. 
  • border-radius: It defines the radius of the element’s corners.
  • animation: The  animation is created by gradually changing from one set of CSS styles to another. 
  • @keyframes: The  @keyframes  rules specifies the animation code.
  • gradient: It provides the smooth transitions between two or more specified colors.
  • z-index: z-index sets the z-order of a positioned element.
  • box-shadow:- box-shadow attaches one or more shadows to an element.
  • transform: It applies a 2D or 3D transformation to an element. It allows you to rotate, move, skew, etc., elements.

Below is the implementation of the above approach.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Candle Animation using CSS</title>
  
    <!--CSS File-->
    <style type="text/css">
        .container {
            height: 100vh;
            width: 100vw;
            align-items: center;
            justify-content: center;
            background: rgb(26, 25, 25);
            animation: change-background 3s infinite linear;
        }
  
        .candle-body {
            position: absolute;
            width: 100px;
            height: 350px;
            background: linear-gradient(
                rgb(209, 158, 64),
                rgb(165, 96, 11),
                rgb(241, 85, 12),
                rgb(109, 47, 3) 50%,
                rgba(0, 0, 0, 0.6)
            );
            bottom: 1%;
            left: 50%
        }
  
        .candle-body:before {
            content: "";
            position: absolute;
        }
  
        .candle-body:after {
            content: "";
            position: absolute;
            top: -25px;
            height: 50px;
            width: 100px;
            border-radius: 50px;
            background: radial-gradient(
                rgb(226, 95, 34),
                rgb(168, 117, 23),
                rgb(255, 149, 18),
                rgb(112, 49, 3)
            );
              
            transform: rotateX(55deg);
            box-shadow: insert 2px 3px 4px 
                rgba(0, 0, 0, 0.2),
                insert -2px -3px 4px 
                rgba(0, 0, 0, 0.2);
        }
  
        .candle-stick {
            width: 7px;
            height: 40px;
            position: absolute;
            top: -40px;
            left: 50px;
            background: linear-gradient(
                rgb(7, 7, 204) 2%,
                rgb(15, 0, 0) 80%,
                rgb(248, 165, 11) 
                99%
            );
            border-radius: 50% 50% 20% 20%;
            z-index: 10;
        }
  
        .candle-flames {
            position: absolute;
            background: linear-gradient(
                rgb(224, 216, 216) 50%,
                rgb(233, 157, 17),
                rgb(12, 12, 226)
            );
            border-radius: 50% 50% 30% 30%;
            width: 30px;
            height: 100px;
            top: -120px;
            left: 35px;
            animation: move 1s linear infinite, 
                    rotate 2s linear infinite;
            box-shadow: 70px -50px 100px rgb(228, 70, 13),
                -70px -50px 100px rgb(180, 52, 6);
        }
  
        @keyframes move {
            0% {
                transform: rotateZ(1deg);
            }
  
            100% {
                transform: rotateZ(-1deg);
            }
        }
  
        @keyframes rotate {
            0% {
                top: -120px;
                left: 40px;
            }
  
            100% {
                top: -120px;
                left: 40px;
            }
        }
  
        @keyframes change-background {
  
            0%,
            60%,
            98%,
            100% {
                background: rgb(3, 52, 65);
            }
  
            61%,
            97% {
                background: #000;
            }
        }
    </style>
</head>
  
<body>
    <div class="container">
        <div class="candle-body">
            <div class="candle-stick"></div>
            <div class="candle-flames"></div>
        </div>
    </div>
</body>
  
</html>


Output:

candle



Last Updated : 07 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads