css - CSS ウォブル アニメーション

Question

div ID で連続的なぐらつきアニメーションを作成しようとしていますが、うまくいきません。どんな助けでも大歓迎です。

これは私のコードです:

.figure {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: rgb(23, 147, 219);
  padding: 40px;
  box-shadow: inset -5px -15px rgba(0, 0, 0, .06);
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 50%;
  animation: wobble 5s ease-in-out infinite;
  transform-origin: center bottom;
  transition: padding .3s, bottom .3s;
  text-align: center;
}

@keyframes wobble {
  33% {
    transform: rotate(5deg);
  }
  66% {
    transform: rotate(-5deg);
  }
}

<div class="figure" ></div>