.run-offset(@path) {
  //之前语法 始于2015年9月，M58版本会移除，大约2017年4月
  motion-path: path(@path);
  //当前规范上的语法 2016年12月支持
  offset-path: path(@path);
}

.react-logo {
  width: 500px;
  height: 500px;
  opacity: 0.5;
  path.bg {
    opacity: 0.2;
  }
}
.react-logo-run {
  animation: move 5s ease-in-out infinite;
  .run-offset(
    'M231.7,200c0,17.4-1.7,88-31.7,88s-31.7-70.6-31.7-88s1.7-88,31.7-88S231.7,182.6,231.7,200z'
  );
}

.react-logo-run-2 {
  animation: move 7s ease-out infinite;
  .run-offset(
    'M216.1,227.7c-15,8.9-76.6,43.4-91.9,17.6s44.6-63.2,59.6-72.1s76.6-43.4,91.9-17.6S231.1,218.8,216.1,227.7z'
  );
}

.react-logo-run,
.react-logo-run-2 {
  animation: move 5s ease-in-out infinite;
  animation-play-state: paused;
  animation-delay: 1.3s;
  opacity: 0.2;
  &.running {
    animation-play-state: running;
  }
}

@keyframes move {
  100% {
    motion-offset: 100%;
    offset-distance: 100%;
  }
}
