<div class="container">
	<div class="fire">
		<div id="fireFront" class="fire-front"></div>
		<div id="fireMid" class="fire-mid"></div>
		<div id="fireBack" class="fire-back"></div>
		<div class="fireplace"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/fireplace.svg" alt="Fire Place" /></div>
	</div>
</div>

<div class="background"></div>
<div class="moon"></div>
// Color variables
$smoke : #fefefe;
$fireFront : #ecf0f1;
$fireMid : #f1c40f;
$fireBack : #e67e22;

// keyframes animations for the fire particles

@keyframes float {
	0% { transform: translateX(0) translateY(10px); }
	25% { transform: translateX(20px) translateY(0); }
	50% { transform: translateX(0) translateY(-10px); }
	75% { transform: translateX(-20px) translateY(0); }
	100% { transform: translateX(0) translateY(10px); }
}

@keyframes fireFront {
	0% { transform: translateX(0) translateY(0); opacity: 0.6; }
	10% { transform: translateX(2.5px) translateY(-5px); }
	20% { transform: translateX(0) translateY(-15px); }
	30% { transform: translateX(-2.5px) translateY(-20px); }
	40% { transform: translateX(0) translateY(-25px); }
	50% { transform: translateX(2.5px) translateY(-30px); opacity: 0.2; }
	60% { transform: translateX(0) translateY(-35px); }
	70% { transform: translateX(-2.5px) translateY(-40px); }
	80% { transform: translateX(0) translateY(-45px); }
	90% { transform: translateX(2.5px) translateY(-50px); }
	100% { transform: translateX(0) translateY(-55px); opacity: 0; }
}

@keyframes fireMid {
	0% { transform: translateX(0) translateY(0); opacity: 0.6; }
	10% { transform: translateX(2.5px) translateY(-10px); }
	20% { transform: translateX(0) translateY(-20px); }
	30% { transform: translateX(-2.5px) translateY(-30px); }
	40% { transform: translateX(0) translateY(-40px); }
	50% { transform: translateX(2.5px) translateY(-50px); opacity: 0.1; }
	60% { transform: translateX(0) translateY(-60px); }
	70% { transform: translateX(-2.5px) translateY(-70px); }
	80% { transform: translateX(0) translateY(-80px); }
	90% { transform: translateX(2.5px) translateY(-90px); }
	100% { transform: translateX(0) translateY(-100px); opacity: 0; }
}

@keyframes fireBack {
	0% { transform: translateX(0) translateY(0); opacity: 0.8;}
	10% { transform: translateX(2.5px) translateY(-20px); }
	20% { transform: translateX(0) translateY(-40px); }
	30% { transform: translateX(-2.5px) translateY(-60px); }
	40% { transform: translateX(0) translateY(-80px); }
	50% { transform: translateX(2.5px) translateY(-100px); opacity: 0.1;}
	60% { transform: translateX(0) translateY(-120px); }
	70% { transform: translateX(-2.5px) translateY(-140px); }
	80% { transform: translateX(0) translateY(-160px); }
	90% { transform: translateX(2.5px) translateY(-180px); }
	100% { transform: translateX(0) translateY(-200px); opacity: 0; }
}

// Normalizer for the html and body tag
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	position: relative;
}

// apply some color to the body
body {
	background: darken(#2c3e50, 10%);
}

.container {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	z-index: 2;
	.fire {
		width: 320px;
		min-width: 300px;
		height: 320px;
		min-height: 300px;
		position: relative;
		animation: float 30s ease-in-out infinite;
		&.debug {
			border: 1px solid red;
			.fire-front,
			.fire-mid,
			.fire-back {
				span {
					background: none;
					border-radius: 0px;
					border: 1px solid blue;
				}
			}
			.fireplace {
				border: 1px solid yellow;
				img { display:none; }
			}
		}
		.fire-front {
			position: absolute;
			width: 60px;
			height: 120px;
			bottom: 20px;
			left: 50%;
			margin-left: -30px;
			z-index: 4;
			span {
				display: inline-block;
				position: absolute;
				bottom: 0px;
				left: 50%;
				width: 20px;
				height: 20px;
				margin-left: -10px;
				border-radius: 50%;
				opacity: 0;
				background-color: $fireFront;
				background: -moz-radial-gradient(center, ellipse cover,  rgba(236,240,241,1) 0%, rgba(236,240,241,1) 25%, rgba(236,240,241,0) 100%);
				background: -webkit-radial-gradient(center, ellipse cover,  rgba(236,240,241,1) 0%,rgba(236,240,241,1) 25%,rgba(236,240,241,0) 100%);
				background: radial-gradient(ellipse at center,  rgba(236,240,241,1) 0%,rgba(236,240,241,1) 25%,rgba(236,240,241,0) 100%);
				transform: translateX(0) translateY(0);
				animation-name: fireFront;
				animation-delay: 0.2s;
				animation-duration: 0.2s;
				animation-fill-mode: forwards;
				animation-iteration-count: infinite;
			}
		}
		.fire-mid {
			position: absolute;
			width: 100px;
			height: 180px;
			bottom: 15px;
			left: 50%;
			margin-left: -50px;
			z-index: 3;
			span {
				display: inline-block;
				position: absolute;
				bottom: 0px;
				left: 50%;
				width: 20px;
				height: 20px;
				margin-left: -10px;
				border-radius: 50%;
				opacity: 0;
				background-color: $fireMid;
				background: -moz-radial-gradient(center, ellipse cover,rgba(241,196,15,1) 0%,rgba(241,196,15,1) 25%, rgba(241,196,15,0) 100%);
				background: -webkit-radial-gradient(center, ellipse cover,rgba(241,196,15,1) 0%,rgba(241,196,15,1) 25%,rgba(241,196,15,0) 100%);
				background: radial-gradient(ellipse at center,rgba(241,196,15,1) 0%,rgba(241,196,15,1) 25%,rgba(241,196,15,0) 100%);
				transform: translateX(0) translateY(0);
				animation-name: fireMid;
				animation-delay: 0.2s;
				animation-duration: 0.3s;
				animation-fill-mode: forwards;
				animation-iteration-count: infinite;
			}
		}
		.fire-back {
			position: absolute;
			width: 140px;
			height: 240px;
			bottom: 5px;
			left: 50%;
			margin-left: -70px;
			z-index: 2;
			span {
				display: inline-block;
				position: absolute;
				bottom: 0px;
				left: 50%;
				width: 20px;
				height: 20px;
				margin-left: -10px;
				border-radius: 50%;
				opacity: 0;
				background-color: $fireBack;
				background: -moz-radial-gradient(center, ellipse cover,rgba(230,126,34,1) 0%, rgba(230,126,34,0) 100%);
				background: -webkit-radial-gradient(center, ellipse cover,rgba(230,126,34,1) 0%,rgba(230,126,34,0) 100%);
				background: radial-gradient(ellipse at center,rgba(230,126,34,1) 0%,rgba(230,126,34,0) 100%);
				transform: translateX(0) translateY(0);
				animation-name: fireBack;
				animation-delay: 0.2s;
				animation-duration: 0.6s;
				animation-fill-mode: forwards;
				animation-iteration-count: infinite;
			}
		}
		.fireplace {
			width: 300px;
			height: 100px;
			position: absolute;
			bottom: -30px;
			left: 10px;
			z-index: 0;
			>img { width: 100%; height: auto; }
		}
	}
}

.background {
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/background-fireplace.svg');
	background-repeat: no-repeat;
	background-size: 1024px 800px;
	background-position: center;
	position: absolute;
	top: 0;
	left: -40px;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	animation: float 30s ease-in-out infinite;
	z-index: 1;
}

.moon {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -300px;
	margin-top: -300px;
	width: 400px;
	height: 400px;
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/moon.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: 0;
}
View Compiled
/*
 The javascript aims to create the necessary particles
 and give them dynamic values such as, size and placement
 for the fire effect but all animation are handeled by
 css for an easier control in the behaviour
*/

//set vars
const fireFrontContainer = document.getElementById('fireFront');
const fireMidContainer = document.getElementById('fireMid');
const fireBackContainer = document.getElementById('fireBack');

var NPFireFront = rand(10,15);
var arrayPFireFront = [];
var NPFireMid = rand(80,100);
var arrayPFireMid = [];
var NPFireBack = rand(100,140);
var arrayPFireBack = [];

while ( arrayPFireFront.length < NPFireFront ) {
	var fireParticle = new FireParticle('front');
	arrayPFireFront.push(fireParticle);
	fireFrontContainer.innerHTML += fireParticle.html;
}

while ( arrayPFireMid.length < NPFireMid ) {
	var fireParticle = new FireParticle('mid');
	arrayPFireMid.push(fireParticle);
	fireMidContainer.innerHTML += fireParticle.html;
}

while ( arrayPFireBack.length < NPFireBack ) {
	var fireParticle = new FireParticle('back');
	arrayPFireBack.push(fireParticle);
	fireBackContainer.innerHTML += fireParticle.html;
}

function FireParticle(type) {
	if ( type === 'front' ) {
		this.radius = rand(1, 15);
		this.margin = this.radius / 2;
		this.spped = randInt(1, 1.5);	
		this.delay = randInt(1, 2);
		this.y = randInt(0.5,1);
		this.x = randInt(40,60);
	} else if ( type === 'mid' ) {
		this.radius = rand(10, 30);
		this.margin = this.radius / 2;
		this.spped = randInt(0.2, 0.6);
		this.delay = randInt(0.5, 1);
		this.y = randInt(0.25,0.5);
		this.x = randInt(35,65);
	} else if ( type == 'back' ) {
		this.radius = rand(10, 40);
		this.margin = this.radius / 2;
		this.spped = randInt(0.6, 0.8);
		this.delay = randInt(0, 0.5);
		this.y = randInt(0, 0.5);
		this.x = randInt(35,65);
	}
	this.html = '<span style="width: '+this.radius+'px; height: '+this.radius+'px; left: '+this.x+'%; bottom: '+this.y+'%; margin-left: -'+this.margin+'px; animation-delay: '+this.delay+'s; animation-speed: '+this.speed+'s"></span>';
}

function rand(min, max) {
	return Math.floor(Math.random() * (max - min)) + min;
}

function randInt(min, max) {
	return Math.random() * (max - min) + min;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.