CSS
* {
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
font-family: 'Chela One', cursive;
}
body {
display: flex;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
background: black;
flex-wrap: wrap;
overflow: hidden;
backface-visibility: hidden;
}
div.item-5, div.item-14, div.item-20 {
-webkit-animation-name: tremble;
}
div.item-1, div.item-4, div.item-10, div.item-16, div.item-19 {
-webkit-animation-name: tremble1;
}
div.item-3, div.item-12, div.item-18 {
-webkit-animation-name: tremble2;
}
div.item-8, div.item-15, div.item-9 {
-webkit-animation-name: tremble3;
}
div.item-2, div.item-13, div.item-7 {
-webkit-animation-name: tremble4;
}
div.item-17, div.item-6, div.item-11 {
-webkit-animation-name: tremble5;
}
div {
position: relative;
border: 0;
flex: 1 0 20%;
-webkit-flex: 1 0 20%;
color: #fff;
width: 20%;
height: 25%;
-webkit-animation-duration: 1.8s;
-webkit-transform-origin: 50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
text-align: center;
font: 1.4rem monospace;
cursor: pointer;
}
div:nth-child(1), div:nth-child(9), div:nth-child(17) {
background: rgb(208, 101, 3);
}
div:nth-child(2), div:nth-child(10), div:nth-child(18) {
background: rgb(22, 145, 190);
}
div:nth-child(3), div:nth-child(11), div:nth-child(19) {
background: #eb5055;
}
div:nth-child(4), div:nth-child(12), div:nth-child(20) {
background: #27ae60;
}
div:nth-child(5), div:nth-child(13) {
background: #8e44ad;
}
div:nth-child(6), div:nth-child(14) {
background: #bdc3c7;
}
div:nth-child(7), div:nth-child(15) {
background: #16a085;
}
div:nth-child(8), div:nth-child(16) {
background: #d35400;
}
@-webkit-keyframes tremble {
0% {
-webkit-transform: translate(2px, 1px) rotate(0deg);
}
10% {
-webkit-transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
-webkit-transform: translate(-3px, 0px) rotate(1deg);
}
30% {
-webkit-transform: translate(0px, 2px) rotate(3deg);
}
40% {
-webkit-transform: translate(5px, -1px) rotate(1deg);
}
50% {
-webkit-transform: translate(-1px, 1px) rotate(-3deg);
}
60% {
-webkit-transform: translate(-2px, 1px) rotate(0deg);
}
70% {
-webkit-transform: translate(16px, 2px) rotate(-1deg);
}
80% {
-webkit-transform: translate(-1px, -13px) rotate(1deg);
}
90% {
-webkit-transform: translate(-5px, 4px) rotate(2deg);
}
100% {
-webkit-transform: translate(2px, 1px) rotate(0deg);
}
}
@-webkit-keyframes tremble1 {
0% {
-webkit-transform: translate(5px, -2px) rotate(-1deg);
}
10% {
-webkit-transform: translate(-11px, -2px) rotate(-1deg);
}
20% {
-webkit-transform: translate(-3px, 0px) rotate(1deg);
}
30% {
-webkit-transform: translate(-2px, 2px) rotate(0deg);
}
40% {
-webkit-transform: translate(5px, -11px) rotate(1deg);
}
50% {
-webkit-transform: translate(-1px, 12px) rotate(-1deg);
}
60% {
-webkit-transform: translate(-2px, 1px) rotate(0deg);
}
70% {
-webkit-transform: translate(-4px, 2px) rotate(-2deg);
}
80% {
-webkit-transform: translate(-1px, -3px) rotate(1deg);
}
90% {
-webkit-transform: translate(2px, 1px) rotate(0deg);
}
100% {
-webkit-transform: translate(5px, -2px) rotate(-1deg);
}
}
@-webkit-keyframes tremble2 {
0% {
-webkit-transform: translate(15px, -2px) rotate(-3deg);
}
10% {
-webkit-transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
-webkit-transform: translate(-3px, 0px) rotate(1deg);
}
30% {
-webkit-transform: translate(2px, 2px) rotate(2deg);
}
40% {
-webkit-transform: translate(3px, -1px) rotate(-4deg);
}
50% {
-webkit-transform: translate(-1px, 2px) rotate(-3deg);
}
60% {
-webkit-transform: translate(-2px, 1px) rotate(0deg);
}
70% {
-webkit-transform: translate(6px, 2px) rotate(-1deg);
}
80% {
-webkit-transform: translate(-2px, -3px) rotate(-1deg);
}
90% {
-webkit-transform: translate(-2px, 1px) rotate(0deg);
}
100% {
-webkit-transform: translate(15px, -2px) rotate(-3deg);
}
}
@-webkit-keyframes tremble3 {
0% {
-webkit-transform: translate(1px, -5px) rotate(1deg);
}
10% {
-webkit-transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
-webkit-transform: translate(-3px, 0px) rotate(1deg);
}
30% {
-webkit-transform: translate(2px, 2px) rotate(2deg);
}
40% {
-webkit-transform: translate(3px, -1px) rotate(-4deg);
}
50% {
-webkit-transform: translate(-1px, 2px) rotate(-3deg);
}
60% {
-webkit-transform: translate(-2px, 1px) rotate(0deg);
}
70% {
-webkit-transform: translate(6px, 2px) rotate(-1deg);
}
80% {
-webkit-transform: translate(-2px, -3px) rotate(-1deg);
}
90% {
-webkit-transform: translate(-2px, 1px) rotate(0deg);
}
100% {
-webkit-transform: translate(1px, -5px) rotate(1deg);
}
}
@-webkit-keyframes tremble4 {
0% {
-webkit-transform: translate(11px, -1px) rotate(1deg);
}
10% {
-webkit-transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
-webkit-transform: translate(-3px, 0px) rotate(1deg);
}
30% {
-webkit-transform: translate(4px, 2px) rotate(6deg);
}
40% {
-webkit-transform: translate(8px, -1px) rotate(-7deg);
}
50% {
-webkit-transform: translate(-1px, 2px) rotate(-3deg);
}
60% {
-webkit-transform: translate(-1px, 9px) rotate(8deg);
}
70% {
-webkit-transform: translate(1px, 11px) rotate(-1deg);
}
80% {
-webkit-transform: translate(-4px, -3px) rotate(-1deg);
}
90% {
-webkit-transform: translate(-2px, 1px) rotate(0deg);
}
100% {
-webkit-transform: translate(11px, -1px) rotate(1deg);
}
}
@-webkit-keyframes tremble5 {
0% {
-webkit-transform: translate(1px, -1px) rotate(-4deg);
}
10% {
-webkit-transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
-webkit-transform: translate(-3px, 0px) rotate(1deg);
}
30% {
-webkit-transform: translate(4px, 2px) rotate(1deg);
}
40% {
-webkit-transform: translate(8px, -1px) rotate(-1deg);
}
50% {
-webkit-transform: translate(-9px, 1px) rotate(4deg);
}
60% {
-webkit-transform: translate(-9px, 5px) rotate(-4deg);
}
70% {
-webkit-transform: translate(7px, 1px) rotate(-3deg);
}
80% {
-webkit-transform: translate(-4px, -3px) rotate(-1deg);
}
90% {
-webkit-transform: translate(-2px, 11px) rotate(-9deg);
}
100% {
-webkit-transform: translate(1px, -1px) rotate(-4deg);
}
}
