:root {
    --duration_animation10: 2s;
}
/* ----------------------------------------------- */

#svg_animation10 {
    background-color: black;
}

#svg_animation10 > #ball {
    fill: gray;
    r:5%;
    animation-name: bouncePath;
    animation-duration: var(--duration_animation10);
    animation-iteration-count: infinite;
    /* animation-timing-function: linear; */
    animation-timing-function: cubic-bezier(.74,.28,.83,.65);
    animation-direction: normal;
}

@keyframes bouncePath {
    0% {
        cx: calc(50%);
        cy: calc(40%);
    }
    25% {
        cx: calc(60%);
        cy: calc(50%);
    }
    50% {
        cx: calc(50%);
        cy: calc(60%);
    }
    75% {
        cx: calc(40%);
        cy: calc(50%);
    }
    100% {
        cx: calc(50%);
        cy: calc(40%);
    }
}


#svg_animation10 > #piston1 {
    width: 20%;
    height: 10%;
    transform-origin: center;
    transform: rotate(0deg);
    animation-name: movePiston;
    animation-duration: var(--duration_animation10);
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-delay: calc((var(--duration_animation10)/ -4)*0);
}

#svg_animation10 > #piston2 {
    width: 20%;
    height: 10%;
    transform-origin: center;
    transform: rotate(90deg);
    animation-name: movePiston;
    animation-duration: var(--duration_animation10);
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-delay: calc((var(--duration_animation10)/ -4)*3);
}

#svg_animation10 > #piston3 {
    width: 20%;
    height: 10%;
    transform-origin: center;
    transform: rotate(180deg);
    animation-name: movePiston;
    animation-duration: var(--duration_animation10);
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-delay: calc((var(--duration_animation10)/ -4)*2);
}

#svg_animation10 > #piston4 {
    width: 20%;
    height: 10%;
    transform-origin: center;
    transform: rotate(270deg);
    animation-name: movePiston;
    animation-duration: var(--duration_animation10);
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-delay: calc((var(--duration_animation10)/ -4)*1);
}




@keyframes movePiston {
    0% {
        animation-timing-function: ease-out;
        height: 10%;
        x: 40%;
        y: 25%;
        ry: 3%;
        rx: 3%;
        fill: hsl(300, 100%, 80%);
    }
    50% {
        animation-timing-function: ease-in;
        height: 20%;
        x: 40%;
        y: 1%;
        ry: 10%;
        rx: 10%;
        fill: hsl(210, 100%, 20%);
    }
    100% {
        animation-timing-function: linear;
        height: 10%;
        x: 40%;
        y: 25%;
        ry: 3%;
        rx: 3%;
        fill: hsl(300, 100%, 80%);
    }
}