<div id="animatie">
<div id="fire3"></div>
	<div id="fire2"></div>
	<div id="fire1"></div>
	<div id="afronding"></div>
	<div id="groot"></div>
	<div id="klein"></div>
</div>
#fire1 {background-color: #ccc;
	color: #000;
	width:100px;
	height:100px;
	border-radius:20%;	
	position:absolute;
	margin-left:50px;
	margin-top:100px;
	background: linear-gradient(-45deg, #edcf28 0%,#ea6a2a 100%);
	transform: rotate(45deg);
	}
	
#fire2 {background-color: red;
	color: #000;
	width:70px;
	height:70px;
	border-radius:20%;	
	position:absolute;
	animation-duration: 2s;
    animation-iteration-count: infinite;
	animation-name: vuur2;
	margin-left: 65px;
	background: linear-gradient(135deg, #db8925 0%,#ea5a1c 50%,#d83c24 100%);
	margin-top:0px;
	display:inline-block;
	animation-fill-mode:forwards;}

#fire3 {background-color: red;
	color: #000;
	width: 40px;
	height: 40px;
	border-radius:20%;
	transform: rotate(45deg);
	animation-name:vuur3;
	position:absolute;
	margin-left:80px;
	margin-top:0px;
	background: linear-gradient(135deg, #e58477 1%,#8f0222 73%,#8f0222 73%,#6d0019 100%);
	animation-duration: 2s;
    animation-iteration-count: infinite;
	animation-fill-mode:forwards;}

@keyframes vuur2{
  0% {
	transform: rotate(45deg);
	margin-top:80px;
  }
  40% {
	transform: rotate(45deg);
    margin-top: 50px;
    }
	100% {
	transform: rotate(45deg);
	margin-top:80px;
  }
}

@keyframes vuur3{
  0% {
	transform: rotate(45deg);
	margin-top:50px;
  }
  100% {
	transform: rotate(45deg);
    margin-top: 0px;
	width: 0px;
	height: 0px;
	margin-left:120px;} 
}

#groot {
	width:100px;
	height:15px;
	background-color: #ccc;
	position:absolute;
	color: #000;
	margin-top:185px;
	margin-left:50px;
	border-radius:10%;
}

#afronding{width:100px;
	height:30px;
	background-color: #ccc;
	position:absolute;
	color: #000;
	margin-top:185px;
	margin-left:50px;
	border-radius:30%;}

#klein{
	width:70px;
	height:10px;
	background-color: grey;
	position:absolute;
	color: #000;
	margin-top:190px;
	margin-left:145px;
	border-radius:10%;
}

#animatie{margin-left:250px;}
body{background-color:#383838;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.