How to create Candle Animation using CSS ?
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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
- 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.