svg txt animation

<!-- Clippath  with text -->
                <clippath id="cp-text">
                    <text text-anchor="middle" x="50%" y="50%" dy=".35em">
                        Unhide_text
                    </text>
                </clippath>
                <!-- Group with clippath for text-->
                <g clip-path="url(#cp-text)">
                    <!-- Animated shapes inside text -->
		<rect width="120%" height="100%" class="anim-shape"></rect>
                    <rect width="100%" height="100%" class="anim-shape"></rect>
                    <rect width="80%" height="100%" class="anim-shape"></rect>
                    <rect width="60%" height="100%" class="anim-shape"></rect>
                    <rect width="40%" height="100%" class="anim-shape"></rect>
                    <rect width="20%" height="100%" class="anim-shape"></rect>
                </g>

.text--transparent {
  fill: transparent; }
.anim-shape {
  -webkit-transform-origin: 0x 150px;
  transform-origin: 0x 150px;
  -webkit-transform: scale(0, 1) translate(0, 0);
  transform: scale(0, 1) translate(0, 0);
  -webkit-animation: moving-panel 2s linear forwards infinite;
  animation: moving-panel 2s linear forwards infinite; }

@-webkit-keyframes moving-panel {
  100% {
    -webkit-transform: scale(1, 111) translate(20px, 0);
    transform: scale(1, 111) translate(20px, 0); } }
@keyframes moving-panel {
  100% {
    -webkit-transform: scale(1, 111) translate(20px, 0);
    transform: scale(1, 111) translate(20px, 0); } }