.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  background: #3498db;
  color: #fff;
  font-family: 'Open Sans', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 55%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.down {
  position: relative;
  -webkit-animation: down 1.6s ease-in infinite both;
          animation: down 1.6s ease-in infinite both;
}
.down .up {
  -webkit-animation: up 1.6s ease-in-out infinite both;
          animation: up 1.6s ease-in-out infinite both;
}
.down .up .squeeze {
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-animation: squeeze 1.6s cubic-bezier(0.72, 0.03, 0.28, 0.97) infinite both;
          animation: squeeze 1.6s cubic-bezier(0.72, 0.03, 0.28, 0.97) infinite both;
}
.down .up .squeeze .rotate-in {
  -webkit-animation: rotate-in 1.6s ease-out infinite both;
          animation: rotate-in 1.6s ease-out infinite both;
}
.down .up .squeeze .rotate-in .rotate-out {
  -webkit-animation: rotate-out 1.6s ease-in infinite both;
          animation: rotate-out 1.6s ease-in infinite both;
}
.down .up .squeeze .rotate-in .rotate-out .square {
  width: 100px;
  height: 100px;
  background: #fff;
}

.shadow {
  position: absolute;
  z-index: -1;
  bottom: -2px;
  left: -4px;
  right: -4px;
  height: 2px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 0px 8px rgba(0, 0, 0, 0.2);
  -webkit-animation: shadow 1.6s ease-in-out infinite both;
          animation: shadow 1.6s ease-in-out infinite both;
}

@-webkit-keyframes down {
  0% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
  20%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes down {
  0% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
  20%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes up {
  0%, 75% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
}
@keyframes up {
  0%, 75% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
}
@-webkit-keyframes squeeze {
  0%, 4% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  45% {
    -webkit-transform: scale(1.8, 0.4);
            transform: scale(1.8, 0.4);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes squeeze {
  0%, 4% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  45% {
    -webkit-transform: scale(1.8, 0.4);
            transform: scale(1.8, 0.4);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes rotate-in {
  0% {
    -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
  }
  20%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes rotate-in {
  0% {
    -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
  }
  20%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes rotate-out {
  0%, 80% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }
}
@keyframes rotate-out {
  0%, 80% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }
}
@-webkit-keyframes shadow {
  0%, 100% {
    -webkit-transform: scaleX(0.5);
            transform: scaleX(0.5);
  }
  45%, 50% {
    -webkit-transform: scaleX(1.8);
            transform: scaleX(1.8);
  }
}
@keyframes shadow {
  0%, 100% {
    -webkit-transform: scaleX(0.5);
            transform: scaleX(0.5);
  }
  45%, 50% {
    -webkit-transform: scaleX(1.8);
            transform: scaleX(1.8);
  }
}