在CSS中要实现一个动画按一个指定的路径运动，相对而言是较为困难的。虽然通过transform能模拟出来一定的效果，但要达到很完美的效果是非常的痛苦的，也较为困难的。那么今天给大家介绍的motion-path属性虽然 还未成为W3C中的正式规范，但这个属性能帮助大家轻易实现一个动画按指定路径运动。

在CSS中有些属性是允许CSS绘制图形形状，比如常见的是使用border或者box-shadow来绘制图形或者形状。除此之外，在CSS中还有类似circle()函数也可以绘制圆形。除此之外，在CSS中有一些形状是为CSS其它属性服务，比如clip-path为mask服务和在shape-outside让文本围绕形状排版。还有一些CSS属性使用像SVG中的图形做一些事情，比如offset-path中使用path()函数实现路径动画。而其中path()是一个非常棒的功能，可以绘制任何图形。在接下来的内容中，来介绍一下CSS中的基本图形和路径。希望对大家有所帮助。

在Web网站或Web应用程序上经常能看到动效的效果，而且实现动效的方式有很多种，比如说CSS、SVG、Canvas、WebGL以及JavaScript等技术手段都可以实现。到目前为止，CSS Animations Level 1、CSS Transitions、Web Animation API以及CSS Houdini的CSS Animation Worklet API等规范可以很好的指导我们如何制作Web动效。特别是CSS的animation和transition令CSSer感到兴奋，因为它们可以让我们使用纯CSS就可以实现以前很多需要依赖JavaScript才能实现的动效。CSS的animation和transition实现从A点到B点的动画效果很简单，而且效果也不错，但这些效果都具有一个特性，即 沿着一条直线运动。即使你使用贝塞尔曲线也无法让某物体（运动对象）沿着曲线路径运动。简单地说，就是无法很好或者轻易的实现路径动画效果。