pattern.css

/****************************************************************************/
/*****************************    CHECKLIST    ******************************/
/****************************************************************************

id selector
class selector
attribute selector

relationship selectors:
  descendent
  child / direct descendent
  sibling

pseudo-selectors
  :hover
  :first-child
  :last-child
  :nth-child
  :nth-last-child
  :nth-of-type
  :first-of-type
  :last-of-type

pseudo-elements
  :before
  :after

****************************************************************************/

body * {
  transition: none;
}

.cell {
  border: 1px dashed #ddd;
}

.cell:hover {
  background-size: cover;
}

#wrapper {
  background-color: lightblue;
  -webkit-transition: all 10s ease-in;
}

#quadrant-sw:active {
  background: url(assets/mario.png) no-repeat center;
}

#quadrant-nw .cell:hover,
#quadrant-ne .cell:hover {
  border: none;
  z-index: 0;

  background: url(assets/sonic-tails-plane.gif) no-repeat;
  background-size: contain;
  animation: plane 0.5s infinite;
  transform: scale(2);
}

#quadrant-se {
  background-image: url(assets/loop.png);
}

#quadrant-se .cell:hover {
  background-image: url(assets/sonic-roll.gif);
  background-size: contain;
}

#quadrant-nw tbody tr:nth-child(6) .cell:hover,
#quadrant-nw tbody tr:nth-child(7) .cell:hover,
#quadrant-nw tbody tr:nth-child(8) .cell:hover,
#quadrant-sw .col .cell:hover {
  background-image: url(assets/sonic-falling.gif);
  background-size: cover;
  transform: scale(1);
}

#quadrant-sw .cell:last-child:hover {
  background-image: url(assets/sonic-run.gif);
  background-size: cover;
}

#quadrant-sw .col:first-child .cell:last-child,
#quadrant-sw .col:nth-child(2) .cell:last-child {
  background-image: url(assets/spikes.gif);
  transition: all 0.5s ease-in-out;
  background-size: contain;
}

#quadrant-sw .col:first-child .cell:last-child:hover,
#quadrant-sw .col:nth-child(2) .cell:last-child:hover {
  background-image: url(assets/sonic-death.gif);
  border: none;
  background-size: cover;
  background-repeat: none;
  -webkit-transition: all 0.5s ease-in-out;
  animation: sonicdies 3s infinite;
  transform: scale(5);
}

@keyframes sonicdies {
  0% {
    bottom: 0px;
  }
  50% {
    bottom: 100px;
  }
  100% {
    bottom: -200px;
  }
}

@keyframes plane {
  0% {
    bottom: 0px;
  }
  50% {
    bottom: 5px;
  }
  100% {
    bottom: -10px;
  }
}