<body> <div class="globalWrapper"> <div class="spaceInvader"> <div class="square sq01"></div> <div class="square sq02"></div> <div class="square sq03"></div> <div class="square sq04"></div> <div class="square sq05"></div> <div class="square sq06"></div> <div class="square sq07"></div> <div class="square sq08"></div> <div class="square sq09"></div> <div class="square sq10"></div> <div class="square sq11"></div> <div class="square sq12"></div> <div class="square sq13"></div> <div class="square sq14"></div> <div class="square sq15"></div> <div class="square sq16"></div> </div> </div> </body>
body { overflow: hidden; } .globalWrapper { width: 100vw; height: 100vh; display: flex; align-items: center; background: black; } .spaceInvader { width: 50vw; margin: 0 auto; display: grid; grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(8, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; } .square { background: black; color: white; } .sq01 { grid-column: 3 / 3; grid-row: 1 / 1; animation: sqAnimate 0.3s 0.3s forwards; } .sq02 { grid-column: 9 / 9; grid-row: 1 / 1; animation: sqAnimate 0.3s 0.2s forwards; } .sq03 { grid-column: 4 / 4; grid-row: 2 / 2; animation: sqAnimate 0.3s 0.4s forwards; } .sq04 { grid-column: 8 / 8; grid-row: 2 / 2; animation: sqAnimate 0.3s 0.5s forwards; } .sq05 { grid-column: 3 / 10; grid-row: 3 / 3; animation: sqAnimate 0.3s 0.6s forwards; } .sq06 { grid-column: 2 / 4; grid-row: 4 / 4; animation: sqAnimate 0.3s 0.7s forwards; } .sq07 { grid-column: 5 / 8; grid-row: 4 / 4; animation: sqAnimate 0.3s 0.8s forwards; } .sq08 { grid-column: 9 / 11; grid-row: 4 / 4; animation: sqAnimate 0.3s 0.9s forwards; } .sq09 { grid-column: 2 / 11; grid-row: 5 / 5; animation: sqAnimate 0.3s 1s forwards; } .sq10 { grid-column: 1 / 1; grid-row: 5 / 8; animation: sqAnimate 0.3s 1.1s forwards; } .sq11 { grid-column: 11 / 11; grid-row: 5 / 8; animation: sqAnimate 0.3s 0.8s forwards; } .sq12 { grid-column: 3 / 10; grid-row: 6 / 6; animation: sqAnimate 0.3s 0.5s forwards; } .sq13 { grid-column: 3 / 3; grid-row: 7 / 7; animation: sqAnimate 0.3s 0.6s forwards; } .sq14 { grid-column: 9 / 9; grid-row: 7 / 7; animation: sqAnimate 0.3s 0.7s forwards; } .sq15 { grid-column: 4 / 6; grid-row: 8 / 8; animation: sqAnimate 0.3s 0.2s forwards; } .sq16 { grid-column: 7 / 9; grid-row: 8 / 8; animation: sqAnimate 0.3s 0.5s forwards; } /* ANIMATION */ @keyframes sqAnimate { 0% {background: black;} 100% {background: white;} }