<h1>CSS Motion Path 动画演示</h1>
  <p><strong>注意：</strong>目前只有谷歌浏览器实现了这个功能，请使用最新版的谷歌浏览器观看。</p>
  <div class="canvas">
  <div class="square square1 path">方块1</div>
  <div class="square square2 path">方块2</div>
    <svg width="580" height="400" viewBox="0 0 580 400">
      <path stroke="#FF2D1A" d="m232.771103,329.79953c-102.829727,-78.900574 -139.598976,-128.812088 -139.897499,-189.912598c-0.270775,-55.699638 45.11657,-109.459106 92.15345,-109.14909c23.485428,0.155491 73.868423,20.65649 91.709885,37.317997c8.990051,8.395851 13.248871,7.567986 33.261871,-6.467178c54.464142,-38.195642 107.654175,-38.997543 142.101776,-2.141006c55.054443,58.903046 45.031464,129.243813 -28.812988,202.207039c-39.259857,38.791107 -124.994751,107.608795 -134.060852,107.608795c-2.761017,0 -28.16275,-17.759216 -56.455643,-39.463959l0,0z" stroke-width="1.5" fill="#fff" />
      <path stroke="#181c21" class="path plane" d="m38.056561,4.386863c-0.586136,0 -1.107681,0.240613 -1.547703,0.677117c-0.43961,0.436077 -0.803249,1.060985 -1.105896,1.841453c-0.60508,1.560679 -0.977318,3.753087 -1.180946,6.378638c-0.203182,2.620523 -0.23745,5.671947 -0.153076,8.938395c-7.240604,2.970366 -21.925862,9.103491 -23.10556,10.472843c-1.570616,1.823208 -1.063179,3.912663 -0.430244,5.299751l24.142197,-4.913754c0.510326,6.4035 1.235912,12.745731 1.868229,17.715393c-2.360985,0.690937 -6.76815,2.055286 -7.677814,2.901402c-1.253193,1.165512 -1.253193,4.929501 -1.253193,4.929501l9.88092,-0.80365c0.232769,1.622536 0.378304,2.569187 0.378304,2.569187l0.014431,0.085464l0.077927,0l0.181957,0l0.077995,0l0.014435,-0.085464c0,0 0.145256,-0.946732 0.378227,-2.569187l9.883835,0.80365c0,0 0,-3.763988 -1.253193,-4.929501c-0.91,-0.846428 -5.320366,-2.213829 -7.680691,-2.904591c0.631054,-4.954422 1.355366,-11.272388 1.865307,-17.655201l23.859238,4.85675c0.632927,-1.387089 1.143303,-3.476543 -0.427315,-5.299751c-1.165123,-1.352394 -15.495529,-7.349104 -22.825523,-10.358953c0.087616,-3.308828 0.055405,-6.40176 -0.150143,-9.052284l0,-0.00631c-0.20372,-2.622749 -0.576351,-4.812962 -1.180988,-6.372328c-0.30254,-0.780253 -0.663174,-1.405215 -1.103001,-1.841453c-0.440044,-0.436505 -0.961491,-0.677117 -1.547714,-0.677117l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="2" fill="#05111c" />
    </svg>
  </div>

body {
    margin: 0;
  }

  h1,p {
    text-align: center;
  }

  .canvas {
    border: 1px solid #000;
    width: 580px;
    height: 400px;
    margin: auto;
  }

  .path {
    motion-path: path('m232.771103,329.79953c-102.829727,-78.900574 -139.598976,-128.812088 -139.897499,-189.912598c-0.270775,-55.699638 45.11657,-109.459106 92.15345,-109.14909c23.485428,0.155491 73.868423,20.65649 91.709885,37.317997c8.990051,8.395851 13.248871,7.567986 33.261871,-6.467178c54.464142,-38.195642 107.654175,-38.997543 142.101776,-2.141006c55.054443,58.903046 45.031464,129.243813 -28.812988,202.207039c-39.259857,38.791107 -124.994751,107.608795 -134.060852,107.608795c-2.761017,0 -28.16275,-17.759216 -56.455643,-39.463959l0,0z');
    -webkit-animation: sweep 6s linear infinite;
            animation: sweep 6s linear infinite;
  }

  .plane {
    -webkit-transform: rotate(90deg) translatex(-62%);
            transform: rotate(90deg) translatex(-62%);
  }

  .square {
    width: 0px;
    height: 0px;
    line-height: 0;
    position: absolute;
    background-color: rgba(63, 140, 50, 0.8);
    -webkit-animation-name: reverse;
            animation-name: reverse;
    /*motion-rotation: reverse;*/
  }

  .square1:after {
    content: '';
    display: block;
    width: 70px;
    height: 30px;
    -webkit-transform: translatey(-50%);
            transform: translatey(-50%);
    background-color: rgba(63, 140, 50, 0.8);
  }

  .square2 {
    width: 70px;
    height: 30px;
    line-height: 30px;
    background-color: red;
  }


  @-webkit-keyframes sweep {
    0% {
      motion-offset: 0;
    }
    to {
      motion-offset: 100%;
    }
  }


  @keyframes sweep {
    0% {
      motion-offset: 0;
    }
    to {
      motion-offset: 100%;
    }
  }

  @-webkit-keyframes reverse {
    0% {
      motion-offset: 0;
    }
    to {
      motion-offset: -100%;
    }
  }

  @keyframes reverse {
    0% {
      motion-offset: 0;
    }
    to {
      motion-offset: -100%;
    }
  }