Fire using CSS animations
How do I make an fire using css animations?
This is an attempt to create simple fire visualisation using CSS animations. Initially, I wanted to do it using single element but ended up using multiple DIVs. This one still can be achieved using single element; but no time to implement. Forks are welcome for a single element FIRE !. What is a fire using css animations? How do you make a fire using css animations? This script and codes were developed by Shidhin on 18 July 2022, Monday.
Fire using CSS animations Previews
Fire using CSS animations - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fire using CSS animations</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background-color: #333;
}
.container { position: relative; top: 150px; width: 200px; margin: auto;
}
.container:before { content: ""; width: 1px; height: 1px; background-color: #333; opacity: 0.9; display: block; position: absolute; top: -30px; left: 50px; border-radius: 10px; box-shadow: -10px 0 20px 20px #ccc, -30px 0 5px 0px #ccc, -40px 0 20px 10px #ccc, 10px 0 15px 15px #ccc, 30px 0 20px 0px #ccc, 40px 0 20px 10px #ccc, -10px -30px 20px 10px #ccc, 10px -40px 20px 10px #ccc, -10px -50px 20px 10px #ccc; animation-name: smoke; animation-iteration-count: infinite; animation-duration: 5s;
}
.fire { position: relative; z-index: 1; width: 50px; height: 50px; border-radius: 0 25px 25px; background-color: red; box-shadow: 20px -25px red, 40px -50px red; transform: rotate(50deg);
}
.fire.move,
.fire.move2 { width: 40px; height: 40px; border-radius: 0 20px 20px; background-color: orange; box-shadow: 15px -20px orange, 30px -40px orange; position: absolute; top: -5px; left: 0px; animation-duration: 3s; animation-name: move; animation-iteration-count: infinite;
}
.fire.move2 { width: 40px; height: 40px; border-radius: 0 20px 20px; background-color: red; box-shadow: 15px -20px red, 30px -40px red; left: 30px; animation-duration: 2s;
}
.fire.top:before { content: ""; z-index: -1; display: block; width: 50px; height: 50px; border-radius: 0 25px 25px; background-color: orange; box-shadow: 20px -25px orange, 40px -50px orange; position: absolute; top: 5px; left: 3px; animation-duration: 500ms; animation-name: fade-wind; animation-iteration-count: infinite;
}
.fire.top:after { content: ""; z-index: -1; display: block; width: 50px; height: 50px; border-radius: 0 25px 25px; background-color: yellow; box-shadow: 20px -25px yellow, 40px -50px yellow; position: absolute; top: 12px; left: 8px; animation-duration: 300ms; animation-name: wind; animation-iteration-count: infinite;
}
@keyframes fade-wind { from { opacity: 1; margin-left: -3px; } to { opacity: 0.5; }
}
@keyframes wind { from { margin-left: -1px; } to { margin-right: 1px; }
}
@keyframes move { from { opacity: 0.3; } to { margin-top: -10px; opacity: 0; }
}
@keyframes smoke { 0% { -webkit-transform: scaleY(1); opacity: 0.1; } 50% { -webkit-transform: scaleY(1.5); opacity: 0.3; left: 40px; } 100% { -webkit-transform: scaleY(1); top: -40px; opacity: 0; left: 65px; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <div class="fire move"></div> <div class="fire move2"></div> <div class="fire top"></div>
</div> <script src="js/index.js"></script>
</body>
</html>Fire using CSS animations - Script Codes CSS Codes
body { background-color: #333;
}
.container { position: relative; top: 150px; width: 200px; margin: auto;
}
.container:before { content: ""; width: 1px; height: 1px; background-color: #333; opacity: 0.9; display: block; position: absolute; top: -30px; left: 50px; border-radius: 10px; box-shadow: -10px 0 20px 20px #ccc, -30px 0 5px 0px #ccc, -40px 0 20px 10px #ccc, 10px 0 15px 15px #ccc, 30px 0 20px 0px #ccc, 40px 0 20px 10px #ccc, -10px -30px 20px 10px #ccc, 10px -40px 20px 10px #ccc, -10px -50px 20px 10px #ccc; animation-name: smoke; animation-iteration-count: infinite; animation-duration: 5s;
}
.fire { position: relative; z-index: 1; width: 50px; height: 50px; border-radius: 0 25px 25px; background-color: red; box-shadow: 20px -25px red, 40px -50px red; transform: rotate(50deg);
}
.fire.move,
.fire.move2 { width: 40px; height: 40px; border-radius: 0 20px 20px; background-color: orange; box-shadow: 15px -20px orange, 30px -40px orange; position: absolute; top: -5px; left: 0px; animation-duration: 3s; animation-name: move; animation-iteration-count: infinite;
}
.fire.move2 { width: 40px; height: 40px; border-radius: 0 20px 20px; background-color: red; box-shadow: 15px -20px red, 30px -40px red; left: 30px; animation-duration: 2s;
}
.fire.top:before { content: ""; z-index: -1; display: block; width: 50px; height: 50px; border-radius: 0 25px 25px; background-color: orange; box-shadow: 20px -25px orange, 40px -50px orange; position: absolute; top: 5px; left: 3px; animation-duration: 500ms; animation-name: fade-wind; animation-iteration-count: infinite;
}
.fire.top:after { content: ""; z-index: -1; display: block; width: 50px; height: 50px; border-radius: 0 25px 25px; background-color: yellow; box-shadow: 20px -25px yellow, 40px -50px yellow; position: absolute; top: 12px; left: 8px; animation-duration: 300ms; animation-name: wind; animation-iteration-count: infinite;
}
@keyframes fade-wind { from { opacity: 1; margin-left: -3px; } to { opacity: 0.5; }
}
@keyframes wind { from { margin-left: -1px; } to { margin-right: 1px; }
}
@keyframes move { from { opacity: 0.3; } to { margin-top: -10px; opacity: 0; }
}
@keyframes smoke { 0% { -webkit-transform: scaleY(1); opacity: 0.1; } 50% { -webkit-transform: scaleY(1.5); opacity: 0.3; left: 40px; } 100% { -webkit-transform: scaleY(1); top: -40px; opacity: 0; left: 65px; }
}Fire using CSS animations - Script Codes JS Codes
(function() {
}).call(this);
| Developer | Shidhin |
| Username | shidhincr |
| Uploaded | July 18, 2022 |
| Rating | 3 |
| Size | 4,096 Kb |
| Views | 44,528 |
Do you need developer help for Fire using CSS animations?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Shidhin (shidhincr) Script Codes
| Name | Size |
| Single DIV Love Symbol in CSS | 2,424 Kb |
| FlipJS Demo | 2,807 Kb |
| Simple material ripple | 3,354 Kb |
| Tic Tac Toe Game in Pure JavaScript and CSS | 3,270 Kb |
| Simple Timer Display using RiotJS | 3,039 Kb |
| Transition Spring animation - webkit | 3,116 Kb |
| A Pen by Shidhin | 5,015 Kb |
| HTML Textbox with a clear button in Pure CSS and without JavaScript | 2,202 Kb |
| Click FaceBook Like to Unlock the Offer | 2,945 Kb |
| Handle Icons in Pure CSS | 1,999 Kb |
Create amazing marketing copy with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Ghost | Mghayour | 11,738 Kb |
| Hc first draft | Stepfray | 5,104 Kb |
| React JS Movie Info App | MTushar | 4,870 Kb |
| 404 Page | Saransh | 2,666 Kb |
| Menubar compass mixin | Michaelparenteau | 4,925 Kb |
| Simple, flat contact form | Zeaklous | 2,719 Kb |
| SVG email test v2.0 | M_J_Robbins | 2,090 Kb |
| Simple Responsive Text | Fbrz | 2,282 Kb |
| Flexbox Test | Icutpeople | 2,486 Kb |
| SVG Circle Progress | JMChristensen | 3,368 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!