<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;}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.