Fan animation create using only css

CSS animations create it possible to animate transitions from one CSS style configuration to a different. Animations consist of 2 components, {a style|a method|a mode} describing the CSS animation and a set of keyframes that indicate the start and finish states of the animation’s style, in addition as possible intermediate waypoints. during this post, we’re going to walk through the fundamentals of CSS animation. you can follow on and view the CSS code for the example animations.

CSS animations enable doing easy animations without JavaScript in the least. JavaScript may be wont to management CSS animation. Animist is a place wherever you can play with a collection of able to use CSS animations, tweak them and download only those you’ll really use.

Learn how Animations works in CSS. Defines however long the animation has got to wait before starting. The animation will only be delayed on its 1st iteration. CSS animations is a planned module for Cascading vogue Sheets that enables the animation of HTML document parts using CSS.

HTML

<div class="windows">
	<div class="window"></div>
	<div class="window"></div>
	<div class="window"></div>
	<div class="window"></div>
	<div class="window"></div>
	<div class="window"></div>
	<div class="window"></div>
	<div class="window"></div>
	<div class="window"></div>
	<div class="window"></div>
</div>
<div class="fan">
	<div class="fan__root">
		<span class="top">
			<label class="red" for="engine"></label>
			<label class="green" for="engine2"></label>
			<label class="blue" for="jack"></label>
		</span>
		<span class="bottom"></span>
	</div>
	<div class="fan__staddle"></div>
	<input type="checkbox" id="jack" hidden />
	<div class="head">
		<div class="fan__engine">
			<span class="center"></span>
		</div>
		<input type="checkbox" id="engine" hidden checked />
		<div>
			<span class="fly"></span>
			<span class="fly"></span>
			<span class="fly"></span>
			<div class="fan__blades">
				<input type="checkbox" id="engine2" hidden checked />
				<div class="fan__blades">
					<div class="center"></div>
					<div class="blade"><span></span></div>
					<div class="blade"><span></span></div>
					<div class="blade"><span></span></div>
					<div class="blade"><span></span></div>
				</div>
			</div>
		</div>
	</div>
</div>

CSS

html {
     overflow: hidden;
}
 body {
     overflow: hidden;
     margin: 0;
     padding: 0;
     background: linear-gradient(90deg, #addfff, #fff9e8);
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100vw;
     height: 100vh;
     position: relative;
}
 body::after {
     position: absolute;
     width: 100%;
     content: "";
     height: calc(100% - 600px);
     z-index: 0;
     background: #efefef;
     bottom: 0;
}
 @keyframes spin {
     from {
         transform: rotate(0deg);
    }
     to {
         transform: rotate(360deg);
    }
}
 @keyframes off {
     to {
         transform: rotate(380deg);
    }
}
 @keyframes off2 {
     to {
         transform: rotate(880deg);
    }
}
 @keyframes fly {
     to {
         margin-top: 50px;
    }
}
 span {
     display: block;
}
 .windows {
     width: 100vw;
     height: 100vh;
     position: absolute;
     z-index: 0;
     top: 0;
     left: 0;
     display: flex;
     flex-wrap: wrap;
     align-content: flex-start;
}
 .window {
     flex: 1 20%;
     box-sizing: border-box;
     height: 300px;
     position: relative;
     border: 10px inset rgba(51, 51, 51, 0.2);
}
 .window::after {
     position: absolute;
     height: 60%;
     width: 1px;
     border-radius: 10px;
     background: linear-gradient( to top, #0f80c7 20%, transparent 30%, transparent 50%, #3f7ba0 100% );
     opacity: 1;
     z-index: 5;
     top: 30px;
     left: 50%;
     transform: rotate(45deg);
     display: block;
     content: "";
}
 .window::before {
     position: absolute;
     height: 40%;
     width: 1px;
     border-radius: 10px;
     background: linear-gradient( to top, #0f80c7 20%, transparent 10%, transparent 50%, #addfff 100% );
     opacity: 1;
     z-index: 5;
     top: 100px;
     left: 60%;
     transform: rotate(45deg);
     display: block;
     content: "";
}
 .window:nth-child(5n - 3)::after, .window:nth-child(5n - 3)::before {
     opacity: 0.8 !important;
}
 .window:nth-child(5n - 2)::after, .window:nth-child(5n - 2)::before {
     opacity: 0.4 !important;
}
 .window:nth-child(5n - 1)::after, .window:nth-child(5n -1)::before {
     opacity: 0.3 !important;
}
 .window:nth-child(5n)::after, .window:nth-child(5n)::before {
     opacity: 0.2 !important;
}
 .fly {
     transition: 0.5s all cubic-bezier(0.04, 0.06, 0, 1.18), 1s transform;
     width: 10px;
     height: 6px;
     background: green;
     border-radius: 50%;
     position: absolute;
     animation: fly 5s alternate infinite ease-in-out;
}
 .fly:nth-of-type(1) {
     top: -78px;
     left: -200px;
}
 .fly:nth-of-type(2) {
     transform: translateY(-10px);
     animation-delay: 4s;
     top: 5px;
     right: -250px;
}
 .fly:nth-of-type(3) {
     transform: translateY(0px);
     top: 400px;
     animation-delay: 2s;
     right: -400px;
}
 .fly::after, .fly::before {
     content: "";
     position: absolute;
     width: 7px;
     height: 5px;
     background-color: rgba(0, 0, 0, 0.5);
     display: block;
     border-radius: 50%;
}
 .fly::before {
     bottom: 4px;
     transform: rotate(325deg);
     left: 3px;
}
 .fly::after {
     transform: rotate(45deg);
     bottom: 6px;
}
 .fan {
     width: 500px;
     height: 500px;
     position: relative;
     z-index: 1;
     margin-top: 75px;
     perspective: 500px;
}
 .fan::after {
     content: "";
     display: block;
     position: absolute;
     height: 364px;
     width: 200px;
     background: rgba(0, 0, 0, 0.08);
     top: calc(100% - 24px);
     left: calc(50% - 100px);
     z-index: -1;
     transform: rotateX(104deg) rotateY(-1deg) rotate(25deg);
     transform-origin: top;
}
 .fan__root {
     width: 200px;
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
}
 .fan__root .top {
     overflow: hidden;
     width: 200px;
     height: 25px;
     position: relative;
}
 .fan__root .top::after {
     content: "";
     display: block;
     width: 200px;
     height: 50px;
     background: #2f423f;
     border-radius: 50%;
}
 .fan__root .top .red {
     position: absolute;
     width: 30px;
     height: 15px;
     border-radius: 15px;
     display: block;
     right: 30px;
     background: #f15249;
     cursor: pointer;
     overflow: hidden;
}
 .fan__root .top .green {
     position: absolute;
     width: 30px;
     height: 15px;
     border-radius: 15px;
     display: block;
     right: 85px;
     background: #32ba7c;
     cursor: pointer;
     overflow: hidden;
}
 .fan__root .top .green::after {
     content: "";
     display: block;
     width: 100%;
     height: 50%;
     position: absolute;
     bottom: 0;
     background: #0aa06e;
}
 .fan__root .top .red::after {
     content: "";
     display: block;
     width: 100%;
     height: 50%;
     position: absolute;
     bottom: 0;
     background: #a00000;
}
 .fan__root .top .blue {
     position: absolute;
     cursor: pointer;
     width: 30px;
     height: 15px;
     border-radius: 15px;
     display: block;
     left: 30px;
     background: #3ac2f2;
     overflow: hidden;
}
 .fan__root .top .blue::after {
     content: "";
     display: block;
     width: 100%;
     height: 50%;
     position: absolute;
     bottom: 0;
     background: #009cc6;
}
 .fan__root .bottom {
     overflow: hidden;
     width: 200px;
     height: 20px;
}
 .fan__root .bottom::after {
     content: "";
     display: block;
     width: 200px;
     height: 40px;
     background: #2f423f;
     border-radius: 18%;
     transform: translateY(-30px);
}
 .fan__staddle {
     position: absolute;
     bottom: 45px;
     background: #2f423f;
     height: 270px;
     width: 13px;
     left: 50%;
     transform: translateX(-50%);
}
 .fan__engine {
     position: absolute;
     bottom: 0px;
     width: 130px;
     height: 130px;
     background: #2f423f;
     border-radius: 50%;
     left: 50%;
     transform: translateX(-50%);
}
 .fan__engine::after {
     content: "";
     background: #2f423f;
     display: block;
     width: 25px;
     height: 50px;
     position: absolute;
     top: 105px;
     left: 50%;
     transform: translateX(-50%);
     border-radius: 0 0 5px 5px;
}
 .fan__blades {
     width: 230px;
     height: 230px;
     position: absolute;
     bottom: -50px;
     transition: 2s;
     transform-origin: center center;
     left: calc(50% - 115px);
     z-index: 1;
     animation: spin infinite 0.38s linear forwards;
}
 .fan__blades .fan__blades {
     bottom: 0;
     animation: spin infinite 0.5s linear forwards;
}
 .fan__blades .blade {
     position: absolute;
     width: 50px;
     height: 100%;
     left: 50%;
     transform: translateX(-50%) skewY(25deg);
     perspective: 500px;
     transform-style: preserve-3d;
}
 .fan__blades .blade:nth-child(2) {
     transform: translateX(-50%) rotate(90deg) skewY(25deg);
}
 .fan__blades .blade:nth-child(3) {
     transform: translateX(-50%) rotate(180deg) skewY(25deg);
}
 .fan__blades .blade:nth-child(4) {
     transform: translateX(-50%) rotate(270deg) skewY(25deg);
}
 .fan__blades .blade span {
     width: 100%;
     height: 200%;
     border-radius: 44px;
     background: #ffc114;
     position: absolute;
     top: -66px;
     display: block;
     transform-style: preserve-3d;
     transform: rotateX(81deg);
     overflow: hidden;
}
 .fan__blades .blade span::after {
     width: 50%;
     height: 100%;
     content: "";
     display: block;
     background: #fca12a;
     transform: rotate(0deg);
}
 .fan__blades .center {
     position: absolute;
     overflow: hidden;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%) rotate(45deg);
     background: #32ba7c;
     z-index: 2;
}
 .fan__blades .center::after {
     display: block;
     content: "";
     width: 40px;
     height: 20px;
     background: #0aa06e;
}
 .head {
     transition: 1s transform;
     height: auto;
     width: auto;
     position: absolute;
     width: 300px;
     height: 300px;
     bottom: 195px;
     left: calc(50% - 150px);
    /* transform: translateX(-50%);
     */
}
 #engine:checked + div > div {
     animation: off2 1s ease-out forwards;
}
 #engine:checked + div > span:nth-child(1) {
     transition: 5s all ease-in-out, 1s transform;
     left: 0px;
     top: 0px;
}
 #engine:checked + div > span:nth-child(2) {
     transition: 5s all ease-in-out, 1s transform;
     right: 0px;
     top: 0px;
}
 #engine:checked + div > span:nth-child(3) {
     transition: 7s all ease-in-out, 1s transform;
     right: -50px;
     top: 200px;
}
 #engine2:checked + div {
     animation: off 1s ease-out forwards;
}
 #jack:checked + div {
     transform: translateY(-115px);
}
 #jack:checked + div > div:nth-child(3) > span {
     transform: translateY(115px);
}
 @media screen and (max-width: 900px) {
     .window {
         flex: 1 25% !important;
    }
}
 @media screen and (max-width: 800px) {
     .window {
         flex: 1 33.3333333% !important;
    }
}
 @media screen and (max-width: 700px) {
     .window {
         flex: 1 50% !important;
    }
}
 

One comment

Leave a Reply