Анимация ключевого кадра не работает с SVG ... Попытка переместить ребенка вверх, вправо, вниз на угол и обратно с помощью преобразования.Это возможно? - PullRequest
Новая
       12

Анимация ключевого кадра не работает с SVG ... Попытка переместить ребенка вверх, вправо, вниз на угол и обратно с помощью преобразования.Это возможно?

0 голосов
/ 04 октября 2018

Ниже приведен CSS для моего проекта, я пытаюсь переместить часть элемента SVG, который находится в HTML, с использованием кода SVG из Illustrator.Строка в HTML: 

<g class="Kid">

Это ключевые кадры CSS, которые я не могу заставить работать ... 

@keyframes walking {


    25% {
        transform: translateY(225);
    }

    50% {
        transform: translateX(134);
    }

    75% {
        transform: translate3d(286, 225);
    }

    100% {
        transform: translateX(-371);
    }

}

.Kid {
    animation: walking 10s infinite linear;
}

1 Ответ

0 голосов
/ 04 октября 2018

Преобразования применяются индивидуально, а не кумулятивно.Поэтому вам нужно указать координаты X и Y для каждой ступени.

  • Направление вверх -Y.Вы шли не в ту сторону.
  • Вы должны предоставить единицы для координат. 

svg {
    background-color: linen;
}

.Kid {
    animation: walking 10s infinite linear;
}


@keyframes walking {

    25% {
        transform: translate(0px, -225px);
    }

    50% {
        transform: translate(134px, -225px);
    }

    75% {
        transform: translate(286px, -100px);
    }

    100% {
        transform: translate(0px ,0px);
    }

}
<svg width="400" height="400">
  <rect x="50" y="350" width="20" height="20" fill="red" class="Kid"/>
</svg>
...