CSS Motion Path 实现直线路径动画

PHOTO EMBED

Thu Apr 29 2021 07:56:17 GMT+0000 (UTC)

Saved by @ycljcfer

div {
    width: 60px;
    height: 60px;
    background: linear-gradient(#fc0, #f0c);
    offset-path: path("M 0 0 L 100 100");
    offset-rotate: 0deg;
    animation: move 2000ms infinite alternate ease-in-out;
}
@keyframes move {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}
content_copyCOPY

https://github.com/chokcoco/iCSS/issues/113