@keyframes fade-in {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

@keyframes width-in {
  0% {
    width: 0%;
  }
  25% {
    width: 25%;
  }
  50% {
    width: 50%;
  }
  75% {
    width: 75%;
  }
}

@-webkit-keyframes width-in {
  0% {
    width: 0%;
  }
  25% {
    width: 25%;
  }
  50% {
    width: 50%;
  }
  75% {
    width: 75%;
  }
}

@keyframes black-white {
  0% {
    background: rgb(0, 0, 0);
    left: 0px;
    top: 0px;
  }
  25% {
    background: rgb(48, 48, 48);
    left: 200px;
    top: 0px;
  }
  50% {
    background: rgb(153, 153, 153);
    left: 200px;
    top: 200px
  }
  75% {
    background: rgb(255, 255, 255);
    left: 0px;
    top: 200px;
  }
}

@keyframes white-black {
  0% {
    background: rgb(255, 255, 255);
    left: 0px;
    top: 0px;
  }
  25% {
    background: rgb(153, 153, 153);
    left: 200px;
    top: 0px;
  }
  50% {
    background: rgb(48, 48, 48);
    left: 200px;
    top: 200px
  }
  75% {
    background: rgb(0, 0, 0);
    left: 0px;
    top: 200px;
  }
}
