.animation-example {
  background: #fff;
  border: 2px dotted #aaa;
  font-size: 24px;
  height: 95vmin;
    left: calc(50% - 47.5vmin);
  position: absolute;
    top: calc(50% - 47.5vmin);
  width: 95vmin;
}

.ball {
  -webkit-animation: 3s cubic-bezier(0,1,.3,1) infinite;
          animation: 3s cubic-bezier(0,1,.3,1) infinite;
  background: green;
  border-radius: 50%;
  height: 10vmin;
    left: calc(50% - 5vmin);
  position: absolute;
    top: calc(50% - 5vmin);
  width: 10vmin;
}

.title {
  line-height: 100vh;
  text-align: center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  z-index: 10;
}

.title span {
    left: 0;
  opacity: 0;
  position: absolute;
    right: 0;
}


@-webkit-keyframes portrait {
  0% {
    top: 10%;
  }
  50% {
    top: calc(90% - 10vmin);
  }
  100% {
    top: 10%;
  }
}


@keyframes portrait {
  0% {
    top: 10%;
  }
  50% {
    top: calc(90% - 10vmin);
  }
  100% {
    top: 10%;
  }
}

@-webkit-keyframes landscape {
  0% {
    left: 10%;
  }
  50% {
    left: calc(90% - 10vmin);
  }
  100% {
    left: 10%;
  }
}

@keyframes landscape {
  0% {
    left: 10%;
  }
  50% {
    left: calc(90% - 10vmin);
  }
  100% {
    left: 10%;
  }
}

@-webkit-keyframes show {
  to {
    opacity: 1;
  }
}

@keyframes show {
  to {
    opacity: 1;
  }
}

@-webkit-keyframes hide {
  to {
    opacity: 0;
  }
}

@keyframes hide {
  to {
    opacity: 0;
  }
}