<div class="bg">
  <div id="blue" class="skew"></div>
  <div id="red" class="skew"></div>
  <div id="blue_2" class="skew"></div>
</div>

<button>Toggle</button>

$skew: skew(-10deg);

html,
body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.bg {
  position: relative;
  background: red;
  width: inherit;
  height: inherit;
  overflow: hidden;
}

.skew {
  position: relative;
  width: 100%;
  height: inherit;
  transform: translateX(-110%);
  animation-fill-mode: forwards;
  &.blue_wrapper {
    background: blue;
    animation: slideRight 1s forwards;
  }
  &.red_wrapper {
    background: red;
    animation: slideRight 1s forwards;
  }
  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
    width: 250px;
    height: inherit;
    background: inherit;
    transform: $skew;
  }
  &::before {
    left: -5%;
  }
  &::after {
    right: -5%;
  }
}

#red,
#blue_2 {
  position: absolute;
  top: 0;
  left: 0;
}

blue_2.blue_wrapper_2 {
  background: blue;
  animation: slideRight 1s forwards;
}

button {
  position: fixed;
  right: 30px;
  bottom: 30px;
}

@keyframes slideRight {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(0);
  }
}

$(document).ready(function() {
  $("button").on("click", function() {
    if (
      $("#blue").hasClass("blue_wrapper") +
      $("#red").hasClass("") +
      $("#blue_2").hasClass("")
    ) {
      $("#red").addClass("red_wrapper");
    } else if (
      $("#blue").hasClass("skew blue_wrapper") +
      $("#red").hasClass("skew red_wrapper") +
      $("#blue_2").hasClass("")
    ) {
      $("skew red_wrapper").removeClass("red_wrapper");
      $("skew blue_wrapper").removeClass("blue_wrapper");
      $("blue_2").addClass("blue_wrapper_2");
    } else if (
      $("#blue").hasClass("") +
      $("#red").hasClass("") +
      $("#blue_2").hasClass("blue_wrapper_2")
    ) {
      $("#red").removeClass("red_wrapper");
      $("#blue").removeClass("blue_wrapper");
    } else {
      $("#blue").addClass("blue_wrapper");
    }
  });
});