CSS Animatable offset-path Property Example

<!DOCTYPE html>
<html>
<head>
<style>
#container {
    height: 200px;
    width: 200px;
    border: solid black 1px;
    margin: 20px auto;
    background-color: #333;
    position: relative;
    overflow: hidden;
}

#path {
    position: absolute;
    width: 100%;
    left: 0;
    top: 100px;
    height: 0px;
    border: dashed 2px white;
    transform-origin: 50%;
    rotate: -45deg;
    animation: moveLine alternate ease-in-out 3s infinite;
}

@keyframes moveLine {
    100%  { rotate: 45deg;}
}

#box {
    width: 20px;
    height: 20px;
    border-radius: 25%;
    background-color: red;
    position: absolute;
    z-index: 1;
    offset-path: path('M20 180 L180 20');
    stroke-width: 2px;
    stroke: black;
    animation: movePinkDiv alternate ease-in-out 3s infinite;
}

@keyframes movePinkDiv {
    100% {  
         offset-distance: 100%;
         offset-path: path('M20 20 L180 180');
    }
}

</style>
</head>
<body>

<h1>Animatable 'offset-path' Property</h1>
<hr>

<div id="container">
  <div id="box"></div>
  <div id="path"></div>
</div>

</body>
</html>