Issue using transform animations on SVG shape and clipPath

Question

I've created an SVG image with two shapes within it: a mountain and a moon, and would like to animate it so that it looks like the moon is rising from behind the mountain. However, the SVG needs to appear transparent, so I created another mountain shape serving as a clip path for the moon.

The moon gets clipped fine, but the problem is that once the animation happens, the clipped parts of the moon moves with it, so it ends up looking like a partial moon. Here's a JSfiddle to show what's going on:

https://jsfiddle.net/zr71jaf2/

SVG code:

<svg>
  <defs>
    <clipPath id="myClip">
      <path id="mountain-mask" class="st0" d="M0,0v90h94.9V0H0z M84.7,53.8H0.5v-3.2l18-26.9l4.9,8L41.3,0.9l13.3,22.7l7-13.1l23,40.2
V53.8z"/>

    </clipPath>
 </defs>

<path id="moon" clip-path="url(#myClip)" d="M25,24.1c-0.1-0.2-0.3-0.3-0.5-0.3c-2.9,0-5.3,2.4-5.3,5.3c0,2.9,2.4,5.3,5.3,5.3c0,0,0,0,0,0
c0.3,0,0.5-0.2,0.5-0.5c0-0.2-0.1-0.3-0.2-0.4c-0.4-0.4-2-2.2-2-4.3c0-2.4,2.1-4.4,2.1-4.4C25,24.5,25.1,24.3,25,24.1z M21.8,29.1
c0,1.7,0.8,3.2,1.5,4.1c-1.8-0.5-3-2.2-3-4.1c0-1.9,1.3-3.6,3-4.1C22.6,25.9,21.8,27.4,21.8,29.1z"/>

<path id="mountain" d="M15.4,35.7C15.4,35.7,15.4,35.7,15.4,35.7c0.1,0.1,0.2,0.1,0.3,0.1c0,0,0,0,0,0h0c0,0,0,0,0,0
c0.1,0,0.2,0,0.3-0.1c0,0,0,0,0,0l2.7-1.8l2.1,1.5l-8.1,14.3c-0.2,0.3-0.1,0.6,0.2,0.8c0.1,0,0.2,0.1,0.3,0.1c0,0,0,0,0,0
c0,0,0,0,0,0c0.1,0,0.1,0,0.2-0.1c0,0,0,0,0.1,0c0.1,0,0.1-0.1,0.2-0.2l18.9-33.2l2.8,1.9c0,0,0,0,0,0c0.1,0.1,0.2,0.1,0.3,0.1
c0,0,0,0,0,0h0c0,0,0,0,0,0c0.1,0,0.2,0,0.3-0.1c0,0,0,0,0,0l2.7-1.8l2.5,1.8c0,0,0,0,0.1,0c0,0,0,0,0.1,0c0.1,0,0.2,0.1,0.2,0.1
c0,0,0,0,0,0c0.1,0,0.2,0,0.2-0.1c0,0,0,0,0.1,0c0,0,0,0,0.1,0l2.4-1.8l2.4,1.8c0,0,0,0,0.1,0c0,0,0,0,0.1,0c0.1,0,0.2,0.1,0.2,0.1
c0,0,0,0,0,0c0.1,0,0.2,0,0.2-0.1c0,0,0,0,0.1,0c0,0,0,0,0.1,0l2.5-1.8l4,7c0,0,0,0,0,0L69,50.3c0.1,0.2,0.3,0.3,0.5,0.3
c0.1,0,0.2,0,0.3-0.1c0.3-0.2,0.4-0.5,0.2-0.8l-14.8-26l1-1.9l2.8,1.8c0,0,0,0,0,0c0.1,0.1,0.2,0.1,0.3,0.1c0,0,0,0,0,0c0,0,0,0,0,0
c0,0,0,0,0,0c0.1,0,0.2,0,0.3-0.1c0,0,0,0,0,0l2.7-1.8l2.5,1.8c0,0,0,0,0.1,0c0,0,0,0,0.1,0c0.1,0,0.2,0.1,0.2,0.1h0
c0.1,0,0.2,0,0.2-0.1c0,0,0,0,0.1,0s0,0,0.1,0l2.3-1.7l16.3,28.3c0.2,0.3,0.5,0.4,0.8,0.2c0.3-0.2,0.4-0.5,0.2-0.8l-23.1-40
c-0.1-0.2-0.3-0.3-0.5-0.3c-0.2,0-0.4,0.1-0.5,0.3l-5.6,10.9c0,0,0,0-0.1,0.1c0,0.1-0.1,0.2-0.1,0.2l-0.8,1.6L50.8,16
c0,0,0-0.1,0-0.1c0,0,0,0,0,0L41.9,0.3c-0.2-0.4-0.8-0.4-1,0L32,15.9c0,0,0,0,0,0c0,0,0,0.1,0,0.1l-8.4,14.7l-4.5-7.5
c-0.1-0.2-0.3-0.3-0.5-0.3c-0.2,0-0.4,0.1-0.5,0.3l-18,26.5C-0.1,50,0,50.3,0.3,50.5c0.3,0.2,0.6,0.1,0.8-0.2l11.3-16.6L15.4,35.7z
 M61.7,11.2l5.6,9.7l-2.1,1.5l-2.4-1.8c0,0,0,0,0,0c0,0-0.1,0-0.1-0.1c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c-0.1,0-0.1,0-0.2,0
c0,0,0,0-0.1,0c-0.1,0-0.1,0-0.2,0.1c0,0,0,0,0,0l-2.8,1.8l-2.6-1.7L61.7,11.2z M41.4,1.8l8.1,14.3l-2.3,1.6l-2.4-1.8c0,0,0,0,0,0
c0,0-0.1,0-0.1-0.1c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0.1c0,0,0,0,0,0l-2.4,1.8
l-2.4-1.8c0,0,0,0,0,0c0,0-0.1,0-0.1-0.1c0,0-0.1,0-0.1,0c0,0,0,0,0,0c-0.1,0-0.1,0-0.2,0c0,0,0,0-0.1,0c-0.1,0-0.1,0-0.2,0.1
c0,0,0,0,0,0l-2.8,1.8L33.2,16L41.4,1.8z M18.5,24.6l4.4,7.2l-1.4,2.5l-2.3-1.7c0,0,0,0,0,0c0,0-0.1,0-0.1-0.1c0,0-0.1,0-0.1,0
c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c-0.1,0-0.1,0-0.2,0.1c0,0,0,0,0,0l-2.8,1.8L13,32.7L18.5,24.6z"/>
</svg>

CSS:

@keyframes rise {
  0% {
    transform: translateY(-20px);
  }

  50% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-20px);
  }
}

#moon {
  animation: rise 3s ease-in-out infinite;
}

Answer 1

Put the moon inside a group, clip the group and animate the moon as before:

<g clip-path="url(#myClip)">
    <path id="moon" d="..." />
</g>