Grafica si animatii din HTML si CSS. Animatie patratele din centru.

Animatie patratele din centru

Aceasta animatie este compusa din cinci randuri a cate cincisprezece etichete div animate dupa o anumita intarziere. Efectul este cel care se observa.

Animatie patratele din centru

HTML

<div class="animation-sqs">
	<div class="animation-sqs-layer">
		<div class="animation-sqs-layer-row">
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell10"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell9"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell8"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell7"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell6"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell5"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell4"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell3"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell4"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell5"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell6"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell7"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell8"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell9"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell10"></div>
			</div>
		</div>
		<div class="animation-sqs-layer-row">
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell10"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell9"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell8"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell7"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell6"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell5"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell4"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell2"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell4"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell5"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell6"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell7"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell8"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell9"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell10"></div>
			</div>
		</div>
		<div class="animation-sqs-layer-row">
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell10"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell9"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell8"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell7"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell6"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell5"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell4"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell1"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell4"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell5"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell6"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell7"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell8"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell9"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell10"></div>
			</div>
		</div>
		<div class="animation-sqs-layer-row">
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell10"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell9"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell8"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell7"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell6"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell5"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell4"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell2"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell4"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell5"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell6"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell7"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell8"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell9"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell10"></div>
			</div>
		</div>
		<div class="animation-sqs-layer-row">
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell10"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell9"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell8"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell7"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell6"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell5"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell4"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell3"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell4"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell5"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell6"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell7"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell8"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell9"></div>
			</div>
			<div class="animation-sqs-layer-row-cell-area">
				<div class="animation-sqs-layer-row-cell animation-sqs-layer-row-cell10"></div>
			</div>
		</div>
	</div>
</div>

CSS

	.animation-sqs,
	.animation-sqs-layer-row-cell-area{
		position: relative;
	}
	.animation-sqs-layer,
	.animation-sqs-layer-row-cell{
		position: absolute;
	}
	.animation-sqs-layer,
	.animation-sqs-layer-row-cell{
		top: 0;
	}
	.animation-sqs-layer,
	.animation-sqs-layer-row-cell{
		left: 0;
	}
	.animation-sqs-layer-row-cell{
		width: 100%;
	}
	.animation-sqs-layer-row-cell-area,
	.animation-sqs-layer-row-cell{
		height: 100%;
	}
	.animation-sqs{
		width: 100%;
		min-width: 100px;
		max-width: 300px;
		height: 100px;
		margin: auto;
	}
		.animation-sqs-layer{
			width: calc(100% - 4px);
			height: calc(100% - 4px);
			padding: 2px;
		}
			.animation-sqs-layer-row{
				height: calc(100% / 5 - 2px);
				margin-bottom: 2px;
				display: flex;
				justify-content: space-between;
			}
			.animation-sqs-layer-row:last-of-type{
				margin-bottom: 0;
			}
				.animation-sqs-layer-row-cell-area{
					width: calc(100% / 15 - 2px);
				}
					.animation-sqs-layer-row-cell{
						background: #61c3ff;
    					box-shadow: inset 1px 1px 0 #4b8db4, inset -1px -1px 0 #4b8db4;
						animation: animation-sqs-layer-row-cell 2.5s infinite;
					}
					@keyframes animation-sqs-layer-row-cell{
						100%{
							width: 0;
							height: 0;
							left: 50%;
							top: 50%;
						}
					}
					.animation-sqs-layer-row-cell1{
						animation-delay: 100ms;
					}
					.animation-sqs-layer-row-cell2{
						animation-delay: 300ms;
					}
					.animation-sqs-layer-row-cell3{
						animation-delay: 500ms;
					}
					.animation-sqs-layer-row-cell4{
						animation-delay: 700ms;
					}
					.animation-sqs-layer-row-cell5{
						animation-delay: 900ms;
					}
					.animation-sqs-layer-row-cell6{
						animation-delay: 1100ms;
					}
					.animation-sqs-layer-row-cell7{
						animation-delay: 1300ms;
					}
					.animation-sqs-layer-row-cell8{
						animation-delay: 1500ms;
					}
					.animation-sqs-layer-row-cell9{
						animation-delay: 1700ms;
					}
					.animation-sqs-layer-row-cell10{
						animation-delay: 1900ms;
					}