html

<div class="cubes">
  <div class="cube child-1"></div>
  <div class="cube child-2"></div>
  <div class="cube child-3"></div>
  <div class="cube child-4"></div>
  <div class="cube child-5"></div>
  <div class="cube child-6"></div>
  <div class="cube child-7"></div>
  <div class="cube child-8"></div>
  <div class="cube child-9"></div>
  <div class="cube big"></div>
</div>

scss

.cubes {
  $wrapHeight: 65px;
  $wrapWidth: 65px;
  $itemheight: 8px;
  $itemWidth: 8px;
  $itemColor: #333;
  height: $wrapHeight;
  width: $wrapWidth;
  position: relative;
  transition: 0.4s;
  .cube {
    height: $itemheight;
    width: $itemWidth;
    top: calc($wrapHeight / 2.3077);
    left: calc($wrapWidth / 2.3077);
    background-color: $itemColor;
    position: absolute;
    &.child-1 {
      transform: translate(-225%, -225%);
      transition: 0.4s;
    }
    &.child-2 {
      transform: translate(0, -225%);
      transition: 0.4s;
    }
    &.child-3 {
      transform: translate(225%, -225%);
      transition: 0.4s;
    }
    &.child-4 {
      transform: translate(225%, 0);
      transition: 0.4s;
    }
    &.child-5 {
      transform: translate(225%, 225%);
      transition: 0.4s;
    }
    &.child-6 {
      transform: translate(0, 225%);
      transition: 0.4s;
    }
    &.child-7 {
      transform: translate(-225%, 225%);
      transition: 0.4s;
    }
    &.child-8 {
      transform: translate(-225%, 0);
      transition: 0.4s;
    }
    &.big {
      transform: scale(0) translateY(-50%) translateX(-50%);
      height: $itemheight;
      width: $itemWidth;
      top: 50%;
      left: 50%;
      background-color: $itemColor;
      transition: 0.4s;
      transform-origin: left top;
    }
  }
  @include hover /* &:hover*/ {
    .cube {
      &.child-1 {
        transform: translate(0%);
        transition: 0.4s 0.1s;
      }
      &.child-2 {
        transform: translate(0%);
        transition: 0.4s 0.2s;
      }
      &.child-3 {
        transform: translate(0%);
        transition: 0.4s 0.3s;
      }
      &.child-4 {
        transform: translate(0%);
        transition: 0.4s 0.4s;
      }
      &.child-5 {
        transform: translate(0%);
        transition: 0.4s 0.5s;
      }
      &.child-6 {
        transform: translate(0%);
        transition: 0.4s 0.6s;
      }
      &.child-7 {
        transform: translate(0%);
        transition: 0.4s 0.7s;
      }
      &.child-8 {
        transform: translate(0%);
        transition: 0.4s 0.8s;
      }
      &.big {
        transform: scale(2) translateY(-50%) translateX(-50%);
        transition: 1s 0.1s;
        transform-origin: left top;
      }
    }
  }
}