今日のCSSアニメーション その3

だんだんシンプルになってきているような気もしますが、今日のCSSアニメーションです。
「ばいーん！」って感じのアニメーションをつくりたくて、「ばいーん！」って感じを目指してみました。
どうでしょう。個人的には意外と「ばいーん！」って感じになったと思います。

DEMO

HTML

<h1 class="ttl">HELLO WORLD.</h1>

SCSS

body {
  background: #ececec;
}

.ttl {
  margin: 50px;
  font: 60px "AvenirNext-Heavy" bold;
  animation: opening 2.5s ease-out 1 normal;
}

@keyframes opening {
    0%    {
        transform: rotateZ(0deg) scale(1);
    }
    10%   {
        transform: rotateZ(0deg) scale(1);
    }
    15%   {
        transform: rotateZ(-5deg) scale(.5);
    }
    20%  {
        transform: rotateZ(0deg) scale(1.2);
    }
    25%  {
        transform: rotateZ(0deg) scale(.8);
    }
    30%  {
        transform: rotateZ(0deg) scale(1.1);
    }
    35%  {
        transform: rotateZ(0deg) scale(.9);
    }
    40%  {
        transform: rotateZ(0deg) scale(1);
    }
    45%  {
        transform: rotateZ(0deg) scale(.95);
    }
    50%  {
        transform: rotateZ(0deg) scale(1);
    }
    55%  {
        transform: rotateZ(0deg) scale(.98);
    }
    60%  {
        transform: rotateZ(0deg) scale(1);
    }
    65%  {
        transform: rotateZ(0deg) scale(.99);
    }
    70%  {
        transform: rotateZ(0deg) scale(1);
    }
    100%  {
        transform: rotateZ(0deg) scale(1);
    }
}