.cell .hex { width: 55px; position: absolute; z-index: -1; transform: translate(-50%, -50%); } .cell .spiral { width: 45px; position: absolute; animation: spin 1s linear infinite; } .cell.alive { animation: birth 1s linear forwards; } .cell.dead { animation: death 1s linear forwards; } #grid { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; overflow: hidden; } #controls { display: none; background-color: rgba(0, 0, 0, 0.7); padding: 5px; border-radius: 10px; } #reload { display: none; } @keyframes death { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes birth { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }