Как анимировать элемент с помощью статического клипа-пути? - PullRequest
Новая
       7

Как анимировать элемент с помощью статического клипа-пути?

0 голосов
/ 15 января 2019

Я новичок в анимации CSS, интересно, как я могу анимировать элемент (id = "men") со статическим путем клипа (id = "clip_1_")? Кажется, что путь клипа движется вместе с моим анимированным элементом.

* Код SVG был создан Adobe Illustrator

Пожалуйста, посмотрите это здесь: https://codepen.io/hackett-lai/pen/BvMOyg

Мой клип SVG-путь: 

    <g id="clip_mask">
        <defs>
            <circle id="clip" cx="150" cy="150" r="132.7"/>
        </defs>
        <clipPath id="clip_1_">
            <use xlink:href="#clip"  style="overflow:visible;"/>
        </clipPath>
        <path id="men" class="st1" d="M110.5,225.4L70.9,247c-2.3,1.3-35.8,51.1-37.7,52.8c49.5,0,84.2-0.2,116.8-0.2
            c32.3,0,90.1,0.9,116.6,0.9c-2.1-1.8-36.1-51.9-38.6-53.2L185.6,226c-5.5-2.7-8.9-8.3-8.9-14.5V195c1.2-1.4,2.6-3.1,4-5.2
            c5.8-8.2,10.1-17.1,13.2-26.6c5.4-1.7,9.4-6.7,9.4-12.7v-17.8c0-3.9-1.7-7.4-4.4-9.8V97.3c0,0,5.3-39.9-48.8-39.9
            s-48.8,39.9-48.8,39.9V123c-2.7,2.4-4.4,5.9-4.4,9.8v17.8c0,4.7,2.5,8.8,6.1,11.2c4.4,19.3,16.1,33.2,16.1,33.2v16.2
            C118.9,217.1,115.7,222.5,110.5,225.4z"/>
    </g>

МОЙ CSS: 

#men{

animation-name: men;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: 149.888px 178.907px;
}


@keyframes men{
0%{
    transform: translate(300px, 300px) rotate(90deg) scale(0);
}

8%{
    transform: translate(-10px, -10px) rotate(-10deg)scale(1.2);
}

10%{
    transform: translate(0px, 0px) rotate(0deg)scale(1);
}

50%{
    transform: translate(0px, 0px)  rotate(0deg)scale(1);
}

52%{
    transform: translate(10px, 10px) rotate(10deg)scale(1.2);
}

60%{
    transform: translate(-300px, 300px) rotate(-90deg)scale(0);
}

100%{
    transform: translate(-300px, 300px) rotate(-90deg)scale(0);
}

}

...