Repeat animation

by Oleh Kotsubko

HTML

<div class="face">
  <svg xmlns="http://www.w3.org/2000/svg" width="213.1" height="286.1" viewBox="0 0 213.1 286.1">
    <radialGradient id="a" cx="78.309" cy="166.704" r="140.502" gradientTransform="matrix(.832 0 0 1 42.074 0)" gradientUnits="userSpaceOnUse">
      <stop offset=".223" stop-color="#FBB03B" />
      <stop offset=".442" stop-color="#F89835" />
      <stop offset=".901" stop-color="#F15B24" />
      <stop offset=".91" stop-color="#F15A24" />
    </radialGradient>
    <ellipse fill="url(#a)" cx="107.3" cy="166.7" rx="99.4" ry="119.4" />
    <path fill="#491600" d="M15.7 126.2s9.1-52.8 76.9-63.3c0 0 3.5-29.1-8.1-55.3 0 0-1.2 6.7-1.7 12.5s-2.1 11.2-2.1 11.2-2.6-7.6-7.1-10.3c0 0-1.1 7-.5 11.7 0 0-18.2 2.7-33.5 17.1 0 0-3.2.3-4.5.7 0 0-.3 4.2 2.4 7.1 0 0-2.9-3.1-9-2.8 0 0 1 4.6 3.6 6.4 0 0-2.1-1.2-4.1-.9.1 0-21.2 26.5-12.3 65.9z"
    />
    <path fill="#1C0900" d="M62.1 38.7c0 2.5-.2 4.9-.3 7.4-.1 1.2-.1 2.4-.1 3.7l-.1 3.7c-.3-1.2-.5-2.4-.6-3.7-.1-1.2-.1-2.5-.1-3.7 0-1.2.2-2.5.3-3.7.3-1.3.5-2.5.9-3.7z" />
    <radialGradient id="b" cx="73.818" cy="163.642" r="40.397" gradientUnits="userSpaceOnUse">
      <stop offset=".265" stop-color="#FFF" />
      <stop offset=".399" stop-color="#FAFDFE" />
      <stop offset=".555" stop-color="#ECF7FB" />
      <stop offset=".724" stop-color="#D4ECF6" />
      <stop offset=".899" stop-color="#B4DEEE" />
      <stop offset=".988" stop-color="#A0D5EA" />
    </radialGradient>
    <path fill="url(#b)" stroke="#006289" stroke-width=".282" stroke-miterlimit="10" d="M87.5 122s-23.1 5.9-34.6 33.2c-11.4 27.4-2.5 42.5 11 48.1 13.6 5.6 30.3.2 35.1-32.7 4.8-31.9-11.5-48.6-11.5-48.6z" />
    <path opacity=".51" fill="#B5C3C6" d="M87.5 122s-23.1 5.9-34.6 33.2c-1.6 3.7-2.7 7.2-3.6 10.5.6-1.7 1.2-3.4 2-5.2 11.4-27.4 34.6-33.2 34.6-33.2s16.2 16.8 11.6 48.7c-.5 3.3-1.1 6.3-1.8 9.1 1.4-4.1 2.6-8.9 3.4-14.4 4.7-32-11.6-48.7-11.6-48.7z" />
    <path fill="#090706" d="M82.5 122.1c1.2-.4 2.3-.6 3.5-.8 1.2-.1 2.4-.2 3.6-.1 2.4.2 4.7 1 6.6...

CSS

body {
  background: #824438;
}

.face {
  margin: 0 auto;
  width: 300px;
}

.face:hover {
  animation-name: shake;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

@keyframes shake {
  from, 16%, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    1.6%, 4.8%, 8%, 11.2%, 14.4% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    3.2%, 6.4%, 9.6%, 12.8% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}