CSS rotate revealing animation

by Konstantin Rouda

HTML

<div class="el"></div>

CSS

.el {
  width: 100px;
  height: 100px;
  margin: 5rem auto 0;
  background: cornflowerblue;
  animation: rotate 1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}


@keyframes rotate {
    0% {
        transform: rotate(0) translateY(-4.8vw) scale(.2);
    }
    83% {
        transform: rotate(360deg) translateY(-2.5vw) scale(1);
        transform-origin: 2vw;
    }
    88% {
        transform: translateY(.6vw) scale(1);
    }
    93% {
        transform: translateY(-.9vw) scale(1);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

JavaScript

/*
source:
https://codepen.io/victorfreire/pen/XXzqEr
*/