Smoke-chimney

by Bhumika107

HTML

<div class="smoke-area">
		<div class="smoke"></div>

	</div>

CSS

.smoke-area {
	position: absolute;
	width: 300px;
	height: 150px;
	top: 103px;
	right: 110px;
  
}

.smoke-area .smoke {
	position: absolute;
	width: 100px;
	height: 50px;
	border-radius: 50%;
	box-shadow: 0 0 20px lightgray;
	background: radial-gradient(ellipse at center, rgba(206,220,231,1) 33%,rgba(89,106,114,0) 100%);
	top: 120px;
	left: 20px;
	-webkit-animation: smoke-move 2.3s linear infinite
}

.smoke-area .smoke:nth-child(2) {
	-webkit-animation: smoke-move 2.5s linear infinite
}

.smoke-area .smoke:nth-child(3) {
	-webkit-animation: smoke-move 2.7s linear infinite
}

.smoke-area .smoke:nth-child(4) {
	-webkit-animation: smoke-move 2.2s linear infinite
}

.smoke-area .smoke:nth-child(5) {
	-webkit-animation: smoke-move 2.1s linear infinite
}

.smoke-area .smoke:nth-child(6) {
	-webkit-animation: smoke-move 2s linear infinite
}

.smoke-area .smoke:nth-child(7) {
	-webkit-animation: smoke-move 2.9s linear infinite
}
@-webkit-keyframes smoke-move {
	0% {top: 200px; left: 20px}
	20% {top: 150px; left: 10px}
	40% {top: 100px; left: 0px; opacity: 0.9}
	60% {top: 50px; left: -10px; }
  80% {top: 25px; left: -20px; }
	100% {top: 0px; left: -30px; opacity: 0; width: 200px; height: 100px}
}
body {
  background: black;
  }
}