css 笔记：CSS与SVG实现元素沿环形路径动画 - 2

Posted 2021-05-13

/*
 * offset-path in Chrome 56+ = motion-path in Chrome 46+ 
 * offset-distance in Chrome 56+ = motion-offset in Chrome 46+ 
 */
@keyframes move {
  from { offset-distance: 0; }
  to   { offset-distance: 100%; }
}
.mover {
  offset-path: path("M25,125a100,100 0 1,0 200,0a100,100 0 1,0 -200,0");
  animation: move 3s linear infinite;
  will-change: offset-distance;
}