Есть ли способ выстроить компонентные анимации в React? ⇐ CSS

[Anonymous]

В настоящее время я делаю игру, в которой используется анимированная марионетка, занимающаяся марширующей анимацией. Я хочу, чтобы этот компонент руки и ноги перемещался друг с другом, но когда нужно остановить, он становится вне синхронизации с другим. < /P>
React < /p>

Код: Выделить всё

function Arm(props) {
return (

[img]{props.img} alt=[/img]

)
}
export default Arm;

function Leg(props) {
return (

[img]{props.img} alt=[/img]

)
}
export default Leg;
< /code>
css < /p>
.arm {
position: absolute;
display: inline-block;
top: 55%;
padding-left: 6.25%;
transform-origin:65% 40%;
}

.leg {
outline-color: blue;
position: absolute;
display: inline-block;
top: 72%;
padding-left: 6.25%;
transform-origin:60% 30%;
}

#left{
animation: march_left 3s linear infinite;
}

#right{
animation: march_right 3s linear infinite;
}

@keyframes march_left {
from {
transform: rotate(0deg);
transition: transform 150ms ease;
} 16% {
transform: rotate(-70deg);
transition: transform 150ms ease;
} 32% {
transform: rotate(-70deg);
transition: transform 150ms ease;
} 48% {
transform: rotate(0deg);
transition: transform 150ms ease;
} to {
transform: rotate(0deg);
transition: transform 150ms ease;
}
}

@keyframes march_right {
from {
transform: rotate(0deg);
transition: transform 150ms ease;
} 48% {
transform: rotate(0deg);
transition: transform 150ms ease;
} 64% {
transform: rotate(-70deg);
transition: transform 150ms ease;
} 80% {
transform: rotate(-70deg);
transition: transform 150ms ease;
} to {
transform: rotate(0deg);
transition: transform 150ms ease;
}
}

Я ищу способ связать анимации для левой/правой руки и ног, чтобы они всегда синхронизировались?

Подробнее здесь: https://stackoverflow.com/questions/797 ... s-in-react