Learn how to craft captivating fire animations using HTML and CSS. Follow our guide to bring your web projects to life with realistic fiery effects.
Table of Contents
Fire animations are a captivating way to make your website come alive. In this tutorial, we'll guide you through the process of creating a realistic fire effect using HTML and CSS.
Let's start making a realistic fire effect using HTML and CSS step by step.
Join My Telegram Channel to Download the Project Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
Start with a simple HTML structure that includes a container div for the fire animation. You can add any additional content you want around it.
Within the container, create a div with a class like "fire" or "flame" to style the fire effect.
Let's break it down step by step:
1. <!DOCTYPE html>: This declaration defines the document type and version of HTML being used. In this case, it's HTML5.
2. <html lang="en">: This is the opening tag for the HTML document. The lang attribute is set to "en," indicating that the document is in English.
3. <head>: This section contains metadata about the document and information for the browser, but it's not displayed on the web page itself.
- <meta charset="UTF-8">: This meta tag specifies the character encoding for the document, which is UTF-8, a common character encoding for displaying text on the web.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag is used to set compatibility mode for Internet Explorer browsers. It suggests using the latest rendering engine available.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag is used for responsive web design. It tells the browser to adapt the page's width to the device's screen width and start with an initial zoom scale of 1.0.
- <title>Fire Animation</title>: This sets the title of the web page, which is displayed in the browser's title bar or tab.
- <link rel="stylesheet" href="styles.css">: This line links an external CSS (Cascading Style Sheets) file named "styles.css" to apply styles and formatting to the HTML content.
4. <body>: This is the main content area of the web page that will be visible to users.
- Inside the <body>, there are several div elements with various classes, such as "back," "light," "content," "fire," "bottom," "reverse," and others. These are typically used to structure and style the content with CSS. The names of the classes suggest that they might be used for a fire animation.
- A <p> element contains a text quote: "It was a pleasure to burn." This is a quote from the book "Fahrenheit 451" by Ray Bradbury.
- Inside the <p>, there is a <span> element with the class "author," which contains the name of the author and the book title.
5. <svg>: This is an inline SVG (Scalable Vector Graphics) element that doesn't display anything visible on its own in the HTML, but it can be used to define graphics, filters, or other visual elements in the document. In this case, it defines a filter with the id "goo" that appears to be applying a Gaussian blur and color matrix transformation to create a visual effect that can be later applied to elements on the page.
Step 2 (CSS Code):
Now, it's time to bring your fire to life with CSS. Define the colors, sizes, and animations for the fire's elements. Consider using gradients and transitions to make the flames flicker realistically.
Let's break down the code step by step:
1. @charset "UTF-8"; and @import url("https://fonts.googleapis.com/css?family=Cinzel|Open+Sans+Condensed:300i");:
- The @charset declaration specifies the character encoding for the stylesheet, which is set to UTF-8.
- The @import rule is used to import external font stylesheets from Google Fonts for the "Cinzel" and "Open Sans Condensed" fonts. These fonts will be used later in the stylesheet.
2. .back:
- This is a CSS class selector, which selects elements with the class name "back."
- It sets the background color to #141e30, positions the element absolutely to the top-left corner, and makes it cover the entire viewport.
3. .light:
- This is another class selector, which selects elements with the class name "light."
- It sets a background gradient with an animation, creating a flickering light effect.
- The background is a radial gradient that changes from a slightly transparent yellow to transparent as it moves towards the bottom of the element.
- It's absolutely positioned to the bottom-left corner and has a fixed positioning with a z-index of 1, which places it on top of other elements.
- The animation "firelight" is applied, which changes the opacity to create a flickering effect.
4. @keyframes firelight:
- This defines a keyframe animation named "firelight."
- It animates the opacity of elements over time, creating a flickering effect. The opacity changes from 1 to 0.8 and back to 1 over a 2-second period.
5. .content:
- This class selector selects elements with the class name "content."
- It positions the element absolutely at the bottom-center of the viewport.
- The element is a circular shape with a hidden overflow and a border radius of 100%.
6. .content .fire:
- This selector selects elements with the class "fire" that are descendants of elements with the class "content."
- It applies a filter called "goo" to these elements, presumably for a special visual effect.
7. .content div.bottom:
- This selector selects div elements with the class "bottom" that are descendants of elements with the class "content."
- It positions these elements absolutely at the bottom-left corner and gives them a yellow background with rounded corners.
8. .content figure:
- This selector selects figure elements within elements with the class "content."
- It positions these elements absolutely and gives them a circular shape with a yellow background.
9. .content figure:nth-child(1), .content figure:nth-child(2), and so on:
- These selectors target specific figure elements with different child positions.
- They apply a keyframe animation named "firecircle" to each figure, creating an animation that involves scaling and changing the background color.
10. .content .reverse div:
- This selector selects div elements with the class "reverse" that are descendants of elements with the class "content."
- It applies styles for elements with a reversed effect, positioning them differently from the previous figures.
11. @keyframes firecircle, @keyframes firereverseleft, and @keyframes firereverseright:
- These keyframe animations define various animations used for the figures and reversed elements.
- They control the transformation, scaling, and background color changes.
12. p and p span:
- These selectors style paragraphs and span elements within paragraphs.
- The paragraphs are centered and styled with a white color, a large font size, and the "Cinzel" serif font.
- The span elements inside paragraphs have a yellow color, italic style, and a different font, "Open Sans Condensed."
- A double dash ("—") is added before the content of the span elements.
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Cinzel|Open+Sans+Condensed:300i");
.back {
background: #141e30;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.light {
width: 100%;
height: 100%;
animation: firelight 2s ease infinite;
background: radial-gradient(ellipse at bottom, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0) 90%);
position: fixed;
z-index: 1;
bottom: 0;
left: 0;
}
@keyframes firelight {
0% {
opacity: 1;
}
50% {
opacity: 0.8;
}
100% {
opacity: 1;
}
}
.content {
position: absolute;
left: 50%;
bottom: 0;
margin: 0 0 -30px -100px;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 100%;
}
.content .fire {
filter: url(#goo);
position: absolute;
width: 100%;
height: 100%;
}
.content div.bottom {
position: absolute;
left: 50px;
bottom: 0;
width: 100px;
height: 30px;
background: #ff9800;
border-radius: 30px;
}
.content figure {
position: absolute;
margin: 0 0 -15px;
left: calc(50% - 70px);
bottom: 0;
width: 70px;
height: 70px;
background: #ff9800;
border-radius: 100%;
}
.content figure:nth-child(1) {
animation: firecircle 1.2s 0.14s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 39px;
margin-bottom: -36px;
}
.content figure:nth-child(2) {
animation: firecircle 1.2s 0.28s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 46px;
margin-bottom: -40px;
}
.content figure:nth-child(3) {
animation: firecircle 1.2s 0.42s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 59px;
margin-bottom: -24px;
}
.content figure:nth-child(4) {
animation: firecircle 1.2s 0.56s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 24px;
margin-bottom: -29px;
}
.content figure:nth-child(5) {
animation: firecircle 1.2s 0.7s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 64px;
margin-bottom: -29px;
}
.content figure:nth-child(6) {
animation: firecircle 1.2s 0.84s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 14px;
margin-bottom: -17px;
}
.content figure:nth-child(7) {
animation: firecircle 1.2s 0.98s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 60px;
margin-bottom: -27px;
}
.content figure:nth-child(8) {
animation: firecircle 1.2s 1.12s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 68px;
margin-bottom: -27px;
}
.content figure:nth-child(9) {
animation: firecircle 1.2s 1.26s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 9px;
margin-bottom: -21px;
}
.content figure:nth-child(10) {
animation: firecircle 1.2s 1.4s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 45px;
margin-bottom: -36px;
}
.content figure:nth-child(11) {
animation: firecircle 1.2s 1.54s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 14px;
margin-bottom: -18px;
}
.content figure:nth-child(12) {
animation: firecircle 1.2s 1.68s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 69px;
margin-bottom: -22px;
}
.content figure:nth-child(13) {
animation: firecircle 1.2s 1.82s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 50px;
margin-bottom: -21px;
}
.content figure:nth-child(14) {
animation: firecircle 1.2s 1.96s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 25px;
margin-bottom: -22px;
}
.content figure:nth-child(15) {
animation: firecircle 1.2s 2.1s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 23px;
margin-bottom: -30px;
}
.content figure:nth-child(16) {
animation: firecircle 1.2s 2.24s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 25px;
margin-bottom: -39px;
}
.content .reverse div {
position: absolute;
margin: 0 0 -15px;
left: 0;
bottom: 0;
width: 70px;
height: 70px;
background: #141e30;
border-radius: 100%;
}
.content .reverse div:nth-child(1) {
animation: firereverseleft 1.2s 0.5s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 12px;
margin-bottom: -29px;
}
.content .reverse div:nth-child(2) {
animation: firereverseleft 1.2s 1s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 3px;
margin-bottom: -38px;
}
.content .reverse div:nth-child(3) {
animation: firereverseleft 1.2s 1.5s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 21px;
margin-bottom: -29px;
}
.content .reverse div:nth-child(4) {
animation: firereverseleft 1.2s 2s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 15px;
margin-bottom: -36px;
}
.content .reverse div:nth-child(5) {
left: 120px;
animation: firereverseright 1.2s 0.5s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 20px;
margin-bottom: -38px;
}
.content .reverse div:nth-child(6) {
left: 120px;
animation: firereverseright 1.2s 1s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 14px;
margin-bottom: -33px;
}
.content .reverse div:nth-child(7) {
left: 120px;
animation: firereverseright 1.2s 1.5s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 19px;
margin-bottom: -23px;
}
.content .reverse div:nth-child(8) {
left: 120px;
animation: firereverseright 1.2s 2s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
margin-left: 2px;
margin-bottom: -28px;
}
@keyframes firecircle {
0% {
transform: translateY(0) scale(1);
background: #ff9800;
}
100% {
transform: translateY(-175px) scale(0);
background: #ffc107;
}
}
@keyframes firereverseleft {
0% {
transform: translateY(0) translateX(0) scale(0.3);
}
100% {
transform: translateY(-175px) translateX(50px) scale(1);
}
}
@keyframes firereverseright {
0% {
transform: translateY(0) translateX(0) scale(0.3);
}
100% {
transform: translateY(-175px) translateX(-50px) scale(1);
}
}
p {
color: white;
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 42px;
font-family: "Cinzel", serif;
}
p span {
width: 100%;
font-size: 22px;
font-style: italic;
float: left;
margin: 30px 0 0;
letter-spacing: 1px;
color: #ffc107;
font-family: "Open Sans Condensed", sans-serif;
}
p span:before {
content: "— ";
} Final Output:
Conclusion:
Congratulations! You've successfully created a stunning fire animation for your website. Feel free to explore more advanced techniques and resources to enhance your web development skills further.
By following these steps, you'll be well on your way to mastering the art of fire animation in web design. Your website will be more engaging and dynamic, leaving a lasting impression on your visitors.
Code by: Artyom
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
