<article class="principle ten">
  <div class="shape"></div>
</article>

body {
  width: 100vw;
  heigth: 100vh;
  background: #e9b59f;
  overflow: hidden;
}

.ten .shape {
  animation: ten 4s infinite linear;
  transform-origin: 50% 8em;
  top: calc(50% - 6em);
}

@keyframes ten {
  0%, 10% {
    transform: none;
    animation-timing-function: cubic-bezier(.87,-1.05,.66,1.31);
  }
  40% {
    transform: rotateZ(-45deg) scale(2);
    animation-timing-function: cubic-bezier(.16,.54,0,1.38);
  }
  70%, 100% {
    transform: rotateZ(360deg) scale(1);
  }
}

.principle {
  width: 100%;
  height: 100vh;
  position: relative;
}

.shape {
  background: #2d97db;
  border: 1em solid #fff;
  width: 4em;
  height: 4em;
  position: absolute;
  top: calc(50% - 2em);
  left: calc(50% - 2em);
}