Edit in JSFiddle

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
  <svg width="471px" height="468px" viewBox="0 0 471 468" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
    <title>yo</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <g id="yo" transform="translate(1.000000, 0.000000)" stroke="#979797">
        <path d="M11.2460934,367.628906 C31.0500182,390.615628 75.0807138,386.883203 111.320309,404.335938 C157.602324,426.625031 198.422692,467.226562 237.89063,467.226562 C319.31507,467.226562 430.901651,370.584703 457.902348,338.070313 C484.903045,305.555922 457.724884,272.423164 437.523442,187.992188 C417.322,103.561211 445.671876,117.522321 393.492192,68.8710938 C353.249327,31.3495027 247.736212,0.609375 202.40625,0.609375 C173.76285,0.609375 129.332476,22.2421791 120.695312,49.9804688 C111.487701,79.5507542 122.640279,89.9057752 104.808591,111.800781 C89.3587567,130.771179 52.1104496,142.606417 24.5781252,166.320312 C5.3563699,182.876223 7.05859375,236.322661 7.05859375,254.695313 C7.05859375,288.250033 -10.3711078,342.537486 11.2460934,367.628906 Z"
        id="Oval-2" fill="#FFFFFF"></path>
        <ellipse id="Oval" fill="#FFD701" cx="285" cy="251" rx="110" ry="101"></ellipse>
        <ellipse id="Oval-5" fill="#FFEF97" cx="286.5" cy="295" rx="19.5" ry="33"></ellipse>
        <g id="Group" transform="translate(240.000000, 202.000000)">
          <ellipse id="Oval-3" fill="#000000" cx="23.5" cy="24.5" rx="23.5" ry="24.5"></ellipse>
          <ellipse id="Oval-3" fill="#000000" cx="70.5" cy="24.5" rx="23.5" ry="24.5"></ellipse>
          <circle id="Oval-4" fill="#FFFFFF" cx="17" cy="9" r="7"></circle>
          <circle id="Oval-4" fill="#FFFFFF" cx="61" cy="11" r="7"></circle>
        </g>

      </g>
    </g>
  </svg>
body {
  background-color: aquamarine;
}

@keyframes Yo1 {
  0% {
    transform: translate(210px, 200px);
    opacity: 0;
  }
  50% {
    transform: translate(250px, 200px);
  }
  100% {
    transform: translate(210px, 200px);
    opacity: 1;
  }
}

@keyframes Yo2 {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(20deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

@keyframes Yo3 {
  0% {
    transform: scale(1) translate(0, 0);
    transition: transform 1s ease;
  }
  50% {
    transform: scale(0.5) translate(260px, 260px);
  }
  100 {
    transform: scale(1) translate(0, 0);
  }
}

#Group {
  transform: translate(210px, 200px);
  animation: Yo1 5s 2s linear 5;
}

ellipse#Oval {
  animation: Yo2 2s linear infinite;
}

ellipse#Oval-5 {
  animation: Yo3 3s 2s linear infinite;
}