普段とまっていて、たまにカタカタ揺れるアニメーションをつけたい

Question

実現したいこと

マウスオーバーではなく、
「普段とまっていて、たまにカタカタ揺れる」ようなアニメーションを画像につけたいです。

具体的に、傾きがない状態から左右にカタカタ揺らしたいです。

ぜひご教示いただければ幸いです。

発生している問題・エラーメッセージ

「左に10度、傾いた状態」から始めて「左に10度、傾いた状態」で
１周分のアニメが終了というのはできたのですが、これをどうするとうまくいくかわかりませんでした。

該当のソースコード

<div class="test01">
<img src="../assets/katakata.png" alt="" class="katakata01">
</div>

.katakata01 {
    display: inline-block;
    animation:katakata 5s linear 0s infinite normal;
}

@keyframes katakata {
0%{transform:rotate(10deg);}
80%{transform:rotate(-10deg);}
85%{transform:rotate(10deg);}
90%{transform:rotate(-10deg);}
95%{transform:rotate(10deg);}
100%{transform:rotate(-10deg);}
}

Answer 1

    @keyframes katakata {
      79% {
        transform: rotate(0deg);
      }

のように0度のフレームを入れるようにするといいかと思います。