@import url("https://fonts.googleapis.com/css?family=Oswald:700");
html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Oswald', sans-serif;
}
.square {
  width: 500px;
  height: 500px;
  position: relative;
  margin: 50vh auto;
  transform: translateY(-50%);
  overflow: hidden;
  animation: movinInBlock 1s ease-out;
}
.square div {
  position: absolute;
  background: #000;
}
.square .line-top {
  height: 20px;
  width: 100%;
  top: 0;
  left: 0;
  animation: lineTop 0.8s cubic-bezier(0.05, 0.79, 0.82, 0.31);
}
.square .line-right {
  height: 100%;
  width: 20px;
  top: 0;
  right: 0;
  animation: lineRight 0.8s cubic-bezier(0.05, 0.79, 0.82, 0.31);
}
.square .line-bottom {
  height: 20px;
  width: 100%;
  bottom: 0;
  left: 0;
  animation: lineBottom 0.8s cubic-bezier(0.05, 0.79, 0.82, 0.31);
}
.square .line-left {
  height: 100%;
  width: 20px;
  top: 0;
  left: 0;
  transform: translateY(60%);
  animation: lineLeft 0.8s cubic-bezier(0.05, 0.79, 0.82, 0.31);
}
.square .black-mask {
  width: 100%;
  height: 100%;
  transform: translateX(100%);
  animation: blackMask 1s 0.9s cubic-bezier(0.35, 1.1, 0.57, 0.76);
}
.square .text {
  background: none;
  font-size: 2.5em;
  line-height: 1;
  letter-spacing: 0px;
  text-transform: uppercase;
  opacity: 0;
  animation: moveIn 0s 1.4s cubic-bezier(0.35, 1.1, 0.57, 0.76) forwards;
}
@-moz-keyframes movinInBlock {
  0% {
    opacity: 0;
    transform: translate(20%, -50%);
  }
  100% {
    opacity: 1;
    transform: translate(0%, -50%);
  }
}
@-webkit-keyframes movinInBlock {
  0% {
    opacity: 0;
    transform: translate(20%, -50%);
  }
  100% {
    opacity: 1;
    transform: translate(0%, -50%);
  }
}
@-o-keyframes movinInBlock {
  0% {
    opacity: 0;
    transform: translate(20%, -50%);
  }
  100% {
    opacity: 1;
    transform: translate(0%, -50%);
  }
}
@keyframes movinInBlock {
  0% {
    opacity: 0;
    transform: translate(20%, -50%);
  }
  100% {
    opacity: 1;
    transform: translate(0%, -50%);
  }
}
@-moz-keyframes lineTop {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes lineTop {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@-o-keyframes lineTop {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes lineTop {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@-moz-keyframes lineRight {
  0% {
    transform: translateY(200%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes lineRight {
  0% {
    transform: translateY(200%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-o-keyframes lineRight {
  0% {
    transform: translateY(200%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes lineRight {
  0% {
    transform: translateY(200%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-moz-keyframes lineBottom {
  0% {
    transform: translateX(150%);
  }
  100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes lineBottom {
  0% {
    transform: translateX(150%);
  }
  100% {
    transform: translateX(0%);
  }
}
@-o-keyframes lineBottom {
  0% {
    transform: translateX(150%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes lineBottom {
  0% {
    transform: translateX(150%);
  }
  100% {
    transform: translateX(0%);
  }
}
@-moz-keyframes lineLeft {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(60%);
  }
}
@-webkit-keyframes lineLeft {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(60%);
  }
}
@-o-keyframes lineLeft {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(60%);
  }
}
@keyframes lineLeft {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(60%);
  }
}
@-moz-keyframes blackMask {
  0% {
    transform: translateX(100%);
  }
  50% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}
@-webkit-keyframes blackMask {
  0% {
    transform: translateX(100%);
  }
  50% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}
@-o-keyframes blackMask {
  0% {
    transform: translateX(100%);
  }
  50% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes blackMask {
  0% {
    transform: translateX(100%);
  }
  50% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}
@-moz-keyframes moveIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes moveIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes moveIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes moveIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}