html,

body {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

}

​

div {

    margin: auto;

    width: 60px;

    height: 60px;

    background: linear-gradient(#fc0, #f0c);

    offset-path: path("M 0 0 L 100 0 L 150 0 L 200 100 L 250 0 L 300 100 L 350 0 L 400 100 L 450 0");

    offset-rotate: 0deg;

    animation: move 3000ms infinite alternate linear;

}

​

div:nth-child(2) {

    width: 40px;

    height: 40px;

    offset-path: path('M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80');

    offset-rotate: unset;

}

​

@keyframes move {

    0% {

        offset-distance: 0%;

    }

    100% {

        offset-distance: 100%;

    }

}

​