Grafica si animatii din HTML si CSS. Animatie macara langa o cladire.

Animatie macara langa o cladire

Inaltimea cablului si deplasarea stanga dreapta al etichetei container cu aceste elemente a reprezentat o mica provocare de sincronizare pentru a reusi acest efect. Restul este HTML si CSS.

Animatie macara langa o cladire

☢

HTML

<div class="build">
	<div class="build-stage">
		<div class="build-stage-top">
			<div class="build-stage-layer">
				<div class="build-stage-sun"></div>
				<div class="build-stage-cloud">
					<div class="build-stage-cloud1"></div>
					<div class="build-stage-cloud2"></div>
				</div>
			</div>
			<div class="build-stage-layer">
				<div class="build-stage-building">
					<div class="build-stage-building-area">
						<div class="build-stage-building-area-top-area">
							<div class="build-stage-building-area-top-area1"></div>
							<div class="build-stage-building-area-top-area2"></div>
						</div>
						<div class="build-stage-building-area-body">
							<div class="build-stage-building-area-body-left">
								<div class="build-stage-building-area-body-left-window">
									<div class="build-stage-building-area-body-left-window-line"></div>
									<div class="build-stage-building-area-body-left-window-line"></div>
								</div>
								<div class="build-stage-building-area-body-left-window">
									<div class="build-stage-building-area-body-left-window-line"></div>
									<div class="build-stage-building-area-body-left-window-line"></div>
								</div>
								<div class="build-stage-building-area-body-left-window">
									<div class="build-stage-building-area-body-left-window-line"></div>
									<div class="build-stage-building-area-body-left-window-line"></div>
								</div>
								<div class="build-stage-building-area-body-left-window">
									<div class="build-stage-building-area-body-left-window-line"></div>
									<div class="build-stage-building-area-body-left-window-line"></div>
								</div>
								<div class="build-stage-building-area-body-left-window">
									<div class="build-stage-building-area-body-left-window-line"></div>
									<div class="build-stage-building-area-body-left-window-line"></div>
								</div>
								<div class="build-stage-building-area-body-left-window">
									<div class="build-stage-building-area-body-left-window-line"></div>
									<div class="build-stage-building-area-body-left-window-line"></div>
								</div>
								<div class="build-stage-building-area-body-left-window">
									<div class="build-stage-building-area-body-left-window-line"></div>
									<div class="build-stage-building-area-body-left-window-line"></div>
								</div>
								<div class="build-stage-building-area-body-left-window">
									<div class="build-stage-building-area-body-left-window-line"></div>
									<div class="build-stage-building-area-body-left-window-line"></div>
								</div>
								<div class="build-stage-building-area-body-left-window">
									<div class="build-stage-building-area-body-left-window-line"></div>
									<div class="build-stage-building-area-body-left-window-line"></div>
								</div>
								<div class="build-stage-building-area-body-left-window">
									<div class="build-stage-building-area-body-left-window-line"></div>
									<div class="build-stage-building-area-body-left-window-line"></div>
								</div>
								<div class="build-stage-building-area-body-left-window">
									<div class="build-stage-building-area-body-left-window-line"></div>
									<div class="build-stage-building-area-body-left-window-line"></div>
								</div>
							</div>
							<div class="build-stage-building-area-body-middle">
								<div class="build-stage-building-area-body-middle-window">
									<div class="build-stage-building-area-body-middle-window1"></div>
								</div>
								<div class="build-stage-building-area-body-middle-window">
									<div class="build-stage-building-area-body-middle-window1"></div>
								</div>
								<div class="build-stage-building-area-body-middle-window">
									<div class="build-stage-building-area-body-middle-window1"></div>
								</div>
								<div class="build-stage-building-area-body-middle-window">
									<div class="build-stage-building-area-body-middle-window1"></div>
								</div>
								<div class="build-stage-building-area-body-middle-window">
									<div class="build-stage-building-area-body-middle-window1"></div>
								</div>
								<div class="build-stage-building-area-body-middle-window">
									<div class="build-stage-building-area-body-middle-window1"></div>
								</div>
								<div class="build-stage-building-area-body-middle-window">
									<div class="build-stage-building-area-body-middle-window1"></div>
								</div>
								<div class="build-stage-building-area-body-middle-window">
									<div class="build-stage-building-area-body-middle-window1"></div>
								</div>
								<div class="build-stage-building-area-body-middle-window">
									<div class="build-stage-building-area-body-middle-window1"></div>
								</div>
								<div class="build-stage-building-area-body-middle-window">
									<div class="build-stage-building-area-body-middle-window1"></div>
								</div>
								<div class="build-stage-building-area-body-middle-window">
									<div class="build-stage-building-area-body-middle-window1"></div>
								</div>
							</div>
							<div class="build-stage-building-area-body-right">
								<div class="build-stage-building-area-body-right-area">
									<div class="build-stage-building-area-body-right-area1">
										<div class="build-stage-building-area-body-right-area1-space">
											<div class="build-stage-building-area-body-right-area1-window"></div>
											<div class="build-stage-building-area-body-right-area1-window"></div>
											<div class="build-stage-building-area-body-right-area1-window"></div>
										</div>
									</div>
									<div class="build-stage-building-area-body-right-area1">
										<div class="build-stage-building-area-body-right-area1-space">
											<div class="build-stage-building-area-body-right-area1-window"></div>
											<div class="build-stage-building-area-body-right-area1-window"></div>
											<div class="build-stage-building-area-body-right-area1-window"></div>
										</div>
									</div>
									<div class="build-stage-building-area-body-right-area1">
										<div class="build-stage-building-area-body-right-area1-space">
											<div class="build-stage-building-area-body-right-area1-window"></div>
											<div class="build-stage-building-area-body-right-area1-window"></div>
											<div class="build-stage-building-area-body-right-area1-window"></div>
										</div>
									</div>
									<div class="build-stage-building-area-body-right-area1">
										<div class="build-stage-building-area-body-right-area1-space">
											<div class="build-stage-building-area-body-right-area1-window"></div>
											<div class="build-stage-building-area-body-right-area1-window"></div>
											<div class="build-stage-building-area-body-right-area1-window"></div>
										</div>
									</div>
									<div class="build-stage-building-area-body-right-area1">
										<div class="build-stage-building-area-body-right-area1-space">
											<div class="build-stage-building-area-body-right-area1-window"></div>
											<div class="build-stage-building-area-body-right-area1-window"></div>
											<div class="build-stage-building-area-body-right-area1-window"></div>
										</div>
									</div>
									<div class="build-stage-building-area-body-right-area1">
										<div class="build-stage-building-area-body-right-area1-space">
											<div class="build-stage-building-area-body-right-area1-window"></div>
											<div class="build-stage-building-area-body-right-area1-window"></div>
											<div class="build-stage-building-area-body-right-area1-window"></div>
										</div>
									</div>
									<div class="build-stage-building-area-body-right-area1">
										<div class="build-stage-building-area-body-right-area1-space">
											<div class="build-stage-building-area-body-right-area1-window"></div>
											<div class="build-stage-building-area-body-right-area1-window"></div>
											<div class="build-stage-building-area-body-right-area1-window"></div>
										</div>
									</div>
									<div class="build-stage-building-area-body-right-area1">
										<div class="build-stage-building-area-body-right-area1-space">
											<div class="build-stage-building-area-body-right-area1-window"></div>
											<div class="build-stage-building-area-body-right-area1-window"></div>
											<div class="build-stage-building-area-body-right-area1-window"></div>
										</div>
									</div>
									<div class="build-stage-building-area-body-right-area1">
										<div class="build-stage-building-area-body-right-area1-space">
											<div class="build-stage-building-area-body-right-area1-window"></div>
											<div class="build-stage-building-area-body-right-area1-window"></div>
											<div class="build-stage-building-area-body-right-area1-window"></div>
										</div>
									</div>
									<div class="build-stage-building-area-body-right-area1">
										<div class="build-stage-building-area-body-right-area1-space">
											<div class="build-stage-building-area-body-right-area1-window"></div>
											<div class="build-stage-building-area-body-right-area1-window"></div>
											<div class="build-stage-building-area-body-right-area1-window"></div>
										</div>
									</div>
									<div class="build-stage-building-area-body-right-area1-doors">
										<div class="build-stage-building-area-body-right-area1-doors-area">
											<div class="build-stage-building-area-body-right-area1-door1">
												<div class="build-stage-building-area-body-right-area1-door1-handle"></div>
											</div>
											<div class="build-stage-building-area-body-right-area1-door2">
												<div class="build-stage-building-area-body-right-area1-door2-windows">
													<div class="build-stage-building-area-body-right-area1-door2-window"></div>
													<div class="build-stage-building-area-body-right-area1-door2-window"></div>
												</div>
											</div>
											<div class="build-stage-building-area-body-right-area1-door1">
												<div class="build-stage-building-area-body-right-area1-door1-handle"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="build-stage-top-crane-area">
					<div class="build-stage-top-crane-area-v">
						<div class="build-stage-top-crane-area-line">
							<div class="build-stage-top-crane-area-line1"></div>
							<div class="build-stage-top-crane-area-line2"></div>
						</div>
						<div class="build-stage-top-crane-area-line">
							<div class="build-stage-top-crane-area-line1"></div>
							<div class="build-stage-top-crane-area-line2"></div>
						</div>
						<div class="build-stage-top-crane-area-line">
							<div class="build-stage-top-crane-area-line1"></div>
							<div class="build-stage-top-crane-area-line2"></div>
						</div>
						<div class="build-stage-top-crane-area-line">
							<div class="build-stage-top-crane-area-line1"></div>
							<div class="build-stage-top-crane-area-line2"></div>
						</div>
						<div class="build-stage-top-crane-area-line">
							<div class="build-stage-top-crane-area-line1"></div>
							<div class="build-stage-top-crane-area-line2"></div>
						</div>
						<div class="build-stage-top-crane-area-line">
							<div class="build-stage-top-crane-area-line1"></div>
							<div class="build-stage-top-crane-area-line2"></div>
						</div>
						<div class="build-stage-top-crane-area-line">
							<div class="build-stage-top-crane-area-line1"></div>
							<div class="build-stage-top-crane-area-line2"></div>
						</div>
						<div class="build-stage-top-crane-area-line">
							<div class="build-stage-top-crane-area-line1"></div>
							<div class="build-stage-top-crane-area-line2"></div>
						</div>
						<div class="build-stage-top-crane-area-line">
							<div class="build-stage-top-crane-area-line1"></div>
							<div class="build-stage-top-crane-area-line2"></div>
						</div>
						<div class="build-stage-top-crane-area-line">
							<div class="build-stage-top-crane-area-line1"></div>
							<div class="build-stage-top-crane-area-line2"></div>
						</div>
						<div class="build-stage-top-crane-area-line">
							<div class="build-stage-top-crane-area-line1"></div>
							<div class="build-stage-top-crane-area-line2"></div>
						</div>
						<div class="build-stage-top-crane-area-line">
							<div class="build-stage-top-crane-area-line1"></div>
							<div class="build-stage-top-crane-area-line2"></div>
						</div>
						<div class="build-stage-top-crane-area-line">
							<div class="build-stage-top-crane-area-line1"></div>
							<div class="build-stage-top-crane-area-line2"></div>
						</div>
					</div>
					<div class="build-stage-top-crane-area-h">
						<div class="build-stage-top-crane-area-line build-stage-top-crane-area-line-cancel">
							<div class="build-stage-top-crane-area-line2"></div>
						</div>
						<div class="build-stage-top-crane-area-line">
							<div class="build-stage-top-crane-area-line1"></div>
							<div class="build-stage-top-crane-area-line2"></div>
						</div>
						<div class="build-stage-top-crane-area-line">
							<div class="build-stage-top-crane-area-line1"></div>
							<div class="build-stage-top-crane-area-line2"></div>
						</div>
						<div class="build-stage-top-crane-area-line">
							<div class="build-stage-top-crane-area-line1"></div>
							<div class="build-stage-top-crane-area-line2"></div>
						</div>
						<div class="build-stage-top-crane-area-line">
							<div class="build-stage-top-crane-area-line1"></div>
							<div class="build-stage-top-crane-area-line2"></div>
						</div>
						<div class="build-stage-top-crane-area-line">
							<div class="build-stage-top-crane-area-line1"></div>
							<div class="build-stage-top-crane-area-line2"></div>
						</div>
						<div class="build-stage-top-crane-area-line">
							<div class="build-stage-top-crane-area-line1"></div>
							<div class="build-stage-top-crane-area-line2"></div>
						</div>
						<div class="build-stage-top-crane-area-line">
							<div class="build-stage-top-crane-area-line1"></div>
							<div class="build-stage-top-crane-area-line2"></div>
						</div>
						<div class="build-stage-top-crane-area-line">
							<div class="build-stage-top-crane-area-line1"></div>
							<div class="build-stage-top-crane-area-line2"></div>
						</div>
						<div class="build-stage-top-crane-area-line">
							<div class="build-stage-top-crane-area-line1"></div>
							<div class="build-stage-top-crane-area-line2"></div>
						</div>
					</div>
					<div class="build-stage-top-crane-area-base">
						<div class="build-stage-top-crane-area-base1"></div>
						<div class="build-stage-top-crane-area-base2"></div>
					</div>
					<div class="build-stage-top-crane-area-squares">
						<div class="build-stage-top-crane-area-squares1"></div>
						<div class="build-stage-top-crane-area-squares2">
							<div class="build-stage-top-crane-area-squares2-sq"></div>
						</div>
					</div>
					<div class="build-stage-top-crane-area-move">
						<div class="build-stage-top-crane-area-move-cable"></div>
						<div class="build-stage-top-crane-area-move-iron"></div>
						<div class="build-stage-top-crane-area-move-lines">
							<div class="build-stage-top-crane-area-move-line1"></div>
							<div class="build-stage-top-crane-area-move-line2"></div>
						</div>
						<div class="build-stage-top-crane-area-move-weight">&#9762;</div>
					</div>
				</div>
			</div>
			<div class="build-stage-layer">
				<div class="build-stage-fog"></div>
			</div>
		</div>
		<div class="build-stage-bottom"></div>
	</div>
</div>

CSS

	.build{
		width: 100%;
		min-width: 100px;
		max-width: 500px;
		margin: auto;
		overflow: auto;
	}
		.build-stage{
			height: 300px;
			background: #83c6d5;
			transition: 1s;
			animation: build-stage 10s alternate infinite;
		}
		@keyframes build-stage{
			100%{
				filter: sepia(100%);
			}
		}
		.build-stage:hover{
			filter: sepia(100%);
		}
			.build-stage-top{
				height: 276px;
				position: relative;
				overflow: hidden;
				z-index: 1;
			}
				.build-stage-layer{
					width: 100%;
					height: 100%;
					display: flex;
					position: absolute;
					top: 0;
					left: 0;
				}
				.build-stage-layer:first-of-type{
					display: block;
					z-index: 2;
				}
					.build-stage-sun{
						width: 50px;
						height: 50px;
						background: yellow;
						border-radius: 50%;
						box-shadow: 0 0 50px yellow;
						margin: 15px auto;
					}
					.build-stage-cloud{
						width: 60px;
						height: 30px;
						overflow: hidden;
						position: absolute;
						top: 15px;
						left: -60px;
						animation: build-stage-cloud 100s infinite;
					}
					.build-stage-cloud *{
						background: white;
						border-radius: 50%;
						position: relative;
					}
					@keyframes build-stage-cloud{
						100%{
							left: 100%;
						}
					}
						.build-stage-cloud1{
							width: 20px;
							height: 20px;
							top: 17px;
						}
						.build-stage-cloud2{
							width: 45px;
							height: 50px;
							top: -15px;
							left: 15px;
						}
				.build-stage-layer:nth-child(2){
					z-index: 3;
				}
					.build-stage-building{
						width: calc(100% - 250px);
					}
						.build-stage-building-area{
							width: 100px;
							margin: 10px auto;
						}
							.build-stage-building-area-top-area{}
								.build-stage-building-area-top-area1{
									height: 7px;
									background: #5a5b58;
								}
								.build-stage-building-area-top-area2{
									height: 7px;
									background: #f0f0e6;
									border-bottom: 2px solid #585855;
								}
							.build-stage-building-area-body{
								height: calc(100% - 10px - 14px - 10px);
								border-bottom: 8px solid #363739;
								display: flex;
							}
								.build-stage-building-area-body-left{
									width: 25px;
									background: #cacccc;
								}
									.build-stage-building-area-body-left-window{
										width: 10px;
										padding: 2px;
										margin: 7px auto;
										background: #fff;
									}
										.build-stage-building-area-body-left-window-line{
											height: 4px;
											background: #302f34;
										}
										.build-stage-building-area-body-left-window-line:last-of-type{
											margin-top: 2px;
										}
								.build-stage-building-area-body-middle{
									width: 20px;
									background: #ce874b;
								}
									.build-stage-building-area-body-middle-window{
										width: 10px;
										padding: 2px;
										background: #ebe3d7;
										margin: 7px auto;
									}
										.build-stage-building-area-body-middle-window1{
											height: 10px;
											background: #2f2e31;
										}
								.build-stage-building-area-body-right{
									width: calc(100% - 15px - 10px);
									background: #cacdcc;
								}
									.build-stage-building-area-body-right-area{
										width: calc(100% - 12px);
										height: calc(100% - 2px - 7px);
										padding: 2px;
										margin: 5px auto;
										background: #f1f1e7;
									}
										.build-stage-building-area-body-right-area1{
											height: 12px;
											background: #5c5c5a;
											margin: auto;
											margin-bottom: 9px;
											display: flex;
											justify-content: center;
											align-items: flex-end;
										}
											.build-stage-building-area-body-right-area1-space{
												width: calc(100% - 2px - 6px);
												padding: 2px 2px 0 2px;
												background: #e4e2d9;
												display: flex;
												justify-content: space-between;
											}
												.build-stage-building-area-body-right-area1-window{
													width: calc(100% / 3 - 1px);
													height: 8px;
													background: #2e2e35;
												}
										.build-stage-building-area-body-right-area1-doors{
											width: calc(100% - 4px);
											height: 20px;
											padding: 2px 2px 0 2px;
											background: #5c5d5a;
										}
											.build-stage-building-area-body-right-area1-doors-area{
												width: calc(100% - 4px);
												height: calc(100% - 2px);
												padding: 2px 2px 0 2px;
												background: #e9e7e5;
												display: flex;
												justify-content: space-between;
											}
												.build-stage-building-area-body-right-area1-door1,
												.build-stage-building-area-body-right-area1-door2{
													width: calc(100% / 3 - 4px - 2px);
													height: calc(100% - 4px - 1px);
													padding: 2px;
												}
												.build-stage-building-area-body-right-area1-door1{
													background: #2e2e32;
													display: flex;
													align-items: center;
												}
													.build-stage-building-area-body-right-area1-door1-handle{
														width: 2px;
														height: 4px;
														background: #5e5e5e;
													}
												.build-stage-building-area-body-right-area1-door2{
													background: #5c5d5a;
												}
													.build-stage-building-area-body-right-area1-door2-windows{
														width: 4px;
														height: calc(100% - 4px);
														padding: 1px 2px;
													}
														.build-stage-building-area-body-right-area1-door2-window{
															width: calc(100% - 2px);
															height: calc(100%  / 2 - 2px);
															border: 1px solid #d0d0cc;
															background: #312f31;
															margin-bottom: 2px;
														}
														.build-stage-building-area-body-right-area1-door2-window:last-of-type{
															margin-bottom: 0;
														}
				.build-stage-layer:nth-child(3){}	
					.build-stage-top-crane-area{
						width: 250px;
						position: relative;
					}
						.build-stage-top-crane-area-v{
							width: 20px;
							height: calc(100% - 20px);
							position: absolute;
							right: 40px;
							top: 2px;
						}
							.build-stage-top-crane-area-line{
								width: 16px;
								height: 16px;
								border: 2px solid black;
								position: relative;
							}
							.build-stage-top-crane-area-line-cancel{
								width: 18px;
								height: 18px;
								border-top: 0px solid black;
								border-left: 0px solid black;
							}
							.build-stage-top-crane-area-line-cancel > .build-stage-top-crane-area-line2{
								height: 26px;
								top: -3px;
							}
								.build-stage-top-crane-area-line1,
								.build-stage-top-crane-area-line2{
									width: 2px;
									height: 24px;
									background: black;
									position: absolute;
									top: -4px;
									right: 7px;
								}
								.build-stage-top-crane-area-line1{
									transform: rotate(-45deg);
								}
								.build-stage-top-crane-area-line2{
									transform: rotate(45deg);
									
								}
						.build-stage-top-crane-area-h{
							width: 200px;
							height: 20px;
							margin-top: 22px;
							display: flex;
							position: absolute;
							right: 0;
						}
						.build-stage-top-crane-area-base{
							width: 40px;
							height: 14px;
							position: absolute;
							right: 30px;
							bottom: 0;
						}
						.build-stage-top-crane-area-base1,
						.build-stage-top-crane-area-base2{
							height: 3px;
							border: 2px solid black;
							background: #414141;
						}
						.build-stage-top-crane-area-base1{
							width: 30px;
							margin: auto;
						}
						.build-stage-top-crane-area-base2{
							width: calc(100% - 4px);
						}
						.build-stage-top-crane-area-squares{
							width: 130px;
							height: 16px;
							display: flex;
							position: absolute;
							top: 42px;
							right: 60px;
						}
							.build-stage-top-crane-area-squares1,
							.build-stage-top-crane-area-squares2,
							.build-stage-top-crane-area-squares2-sq{
								border: 2px solid black;
							}
							.build-stage-top-crane-area-squares1{
								width: calc(100% - 4px - 16px);
								height: 4px;
								background: #414141;
							}
							.build-stage-top-crane-area-squares2{
								width: 12px;
								height: 12px;
								background: #ee9219;
								display: flex;
								justify-content: center;
								align-items: center;
							}
								.build-stage-top-crane-area-squares2-sq{
									width: 4px;
									height: 4px;
									background: white;
								}
						.build-stage-top-crane-area-move{
							width: 60px;
							position: absolute;
							top: 50px;
							right: 80px;
							animation: build-move-h 20s infinite;
						}
						@keyframes build-move-h{
							10%{right:80px;}
							20%{right:80px;}
							30%{right:150px;}
							40%{right:150px;}
							50%{right:150px;}
							60%{right:150px;}
							70%{right:150px;}
							80%{right:80px;}
							90%{right:80px;}
							100%{right:80px;}
						}
							.build-stage-top-crane-area-move-cable{
								width: 2px;
								height: 163px;
								background: #414141;
								margin: auto;
								animation: build-move-v 20s infinite;
							}
							@keyframes build-move-v{
								10%{height:163px;}
								20%{height:100px;}
								30%{height:100px;}
								40%{height:100px;}
								50%{height:163px;}
								60%{height:163px;}
								70%{height:100px;}
								80%{height:100px;}
								90%{height:100px;}
								100%{height:163px;}
							}
							.build-stage-top-crane-area-move-iron,
							.build-stage-top-crane-area-move-weight{
								border: 2px solid #414141;
							}
							.build-stage-top-crane-area-move-iron{
								width: 10px;
								height: 15px;
								background: #4f4c52;
								margin: auto;
							}
							.build-stage-top-crane-area-move-lines{
								height: 20px;
								position: relative;
							}
								.build-stage-top-crane-area-move-line1,
								.build-stage-top-crane-area-move-line2{
									width: 2px;
									height: 30px;
									background: #414141;
									position: absolute;
									top: -5px;
								}
								.build-stage-top-crane-area-move-line1{
									transform: rotate(45deg);
									left: 12px;
								}
								.build-stage-top-crane-area-move-line2{
									transform: rotate(-45deg);
									right: 12px;
								}
							.build-stage-top-crane-area-move-weight{
								width: calc(100% - 4px);
								height: 20px;
								background: #ee9219;
								font-size: 18px;
								display: flex;
								justify-content: center;
								align-items: center;
							}
				.build-stage-layer:last-of-type{
					align-items: flex-end;
					z-index: 4;
				}
					.build-stage-fog{
						width: 100%;
						height: 0;
						background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.5));
						filter: blur(2px);
						animation: build-stage-fog 10s alternate infinite;
					}
					@keyframes build-stage-fog{
						100%{
							height: 70px;
						}
					}
			.build-stage-bottom{
				width: calc(100% - 4px);
				height: 20px;
				border: 2px solid black;
				background: #ee9219;
			}