Seismic Grid

index.pug

table
	tr
		td
		td
		td
		td
		td
	tr
		td
		td
		td
		td
		td
	tr
		td
		td
		td
		td
		td
	tr
		td
		td
		td
		td
		td
		

seismic-grid.markdown

Seismic Grid

A Pen by Adrian Samuel on CodePen.

License.

style.scss

td {
	width: 50px;
	height: 50px;
	animation: move 3s infinite;
	border: 1px solid rbga(0, 0, 0, 0.6);
	position: relative;
	border: 1px solid rbga(0, 0, 0, 0.5);
	position: relative;
	cursor: pointer;
	box-shadow: 8px 8px 8px 1px rgba(0, 0, 0, 0.3);
	transition: 150ms;
	&:active {
		box-shadow: 0px 0px 0px 0px;
	}
}

table {
	margin: 0 auto;
	


}




@keyframes move {
	0% {box-shadow: 4px 2px 2px 3px rgba(0, 0, 0, 0.4)
	}
	25% {;box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.4);}
	50% {box-shadow: 4px 2px 2px 3px rgba(0, 0, 0, 0.4)}
	75% {box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.4);}
	100% {box-shadow: 4px 2px 2px 3px rgba(0, 0, 0, 0.4)}
}

td:nth-child(2n +1) {
	animation: moveme 3s infinite;
}

td:nth-child(5n +1) {
	animation: moveme 3s infinite;
}

@keyframes moveme {
	0% {box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.4)
	}
	25% {;box-shadow: 4px 2px 2px 3px rgba(0, 0, 0, 0.4);}
	50% {box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.4)}
	75% {box-shadow: 4px 2px 2px 3px rgba(0, 0, 0, 0.4);}
	100% {box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.4)}
}