⛴️ 👨‍🎓 📋 运动路径：现代动画入门 🔋 🐪 👩🏼‍🏫

是否曾经想为您的网站创建漂亮的动画主页？精心制作的动画如何最好地展示您的旗舰产品？如何引导用户注意遵循复杂路径的菜单链接？

为了实现与Web开发的现代世界相关的这些愿望，Motion Path Module Level 1 CSS模块使使用全新的动画类型成为可能，并允许您沿给定的轨迹移动HTML元素。

浏览器支持

让我们从不愉快的时刻开始。我们将不得不令Safari（OS X和iOS）和Internet Explorer（如果有）的爱好者失望：并非所有浏览器都支持Motion Path模块的属性。

但是，在撰写本文时，大约有75％的网站访问者有机会享受这项现代技术。

, — . -.

Motion Path

( offset-path),
( offset-distance)
( offset-rotate).

offset-path

. : path(), ray(), url(), circle(), polygon(), inset(), none.

— path(), .

offset-path SVG. , , SVG .

, , , SVG — , , , , .. .

, div.

div {
  offset-path: path('M10 10 H 180 V 180 H 10 Z'); /*   */
}

— SVG, SS-Tricks la Cascade ( – . .) MDN.

offset-distance

offset-distance, . (, rem, ..). , .

div {
  animation: move 1s; /*  "move"   1s */
}

@keyframes move {
  0% { 
    offset-distance: 0%; /*     */
  }
  100% { 
    offset-distance: 100%; /*       */
  }
}

CodePen:

offset-rotate

, , offset-rotate, .

auto ( ): , . .
reverse: , 180° , .
auto Xdeg ( reverse Xdeg): X.

, , , , , , , .

, . SVG, «» , .

path()

, div:

div {
  offset-path: path('M10 10 H 180 V 180 H 10 Z'); /*   */
}

— SVG, .

SVG svg path, d

, SVG :

<svg ...>
    <path d="M10 10 H 180 V 180 H 10 Z" fill="none" stroke="gray" />
</svg>

, SVG CSS, :

<svg class="svg-path" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 10 H 180 V 180 H 10 Z">
</svg>

.svg-path {
  stroke: gray;
  stroke-width: 4;
  fill: none;
}

. :

CSS-, path ( ),
, offset-path ( ),
-, position: absolute.

, :

<div class="motion-container">

  <svg class="svg-path">
    <path>
  </svg>

  <div class="motion-object"></div>

</div>

, , CSS:

/*   .svg-path */
.motion-container {
  position: relative;
}
.svg-path {
  position: absolute;
  left: 0;
  top: 0;
}

, CSS-.

, , — . , , SVG. C SVG-. , Sketch Inkscape.

SVG- Method Draw.

, , , .

CodePen:

-

, , , , , . .

RGAA 4 , / . . ( WC3 - . . — ..)
- prefers-reduce-motion , .

Motion Path, CodePen , :

, CSS-, - - .

请在评论中分享您对本文主题的最佳做法或您在Internet上喜欢的示例。

运动路径：现代动画入门