What is the CSS motion path module? How to animate motion paths?

What is the CSS motion path module? In this article, we will learn more about the CSS motion path module, talk about its usage, and introduce how to use this module to create simple and complex path animations.

There is a very interesting module in CSS - CSS Motion Path Module Level 1, which translates to motion path. This article will take a closer look at motion path. Through this article, you can learn:

• What is CSS motion path
• Use CSS motion path to create simple path animations
• Use CSS motion path to create complex path animations

What is CSS Motion Path?

What is CSS Motion Path? Using the properties stipulated in this specification, we can control the animation of the element's position transformation according to a specific path. Moreover, this path can be a very complex path.

Before introducing CSS Motion Path further, let’s first look at how we can implement path animation using the capabilities of traditional CSS.

CSS Traditional Way to Implement Linear Path Animation

Before, we wanted to move an object in a straight line from point A to point B. Generally speaking, we can use transform: translate(), top | left | bottom | right or margin and other attributes that can change the position of the object.

A simple Demo:

<div></div>

div {
    width: 60px;
    height: 60px;
    background: #000;
    animation: move infinite 1s alternate linear;
}
@keyframes move {
    100% {
        transform: translate(100px, 100px);
    }
}

The effect of simple linear motion from point A to point B is as follows:

CSS traditional way to implement curve path animation

Of course, CSS can also implement some simple curve path animation. What should we do if we want to move from point A to point B not in a straight line, but in a curve?

For some simple arc curve paths, you can still achieve it with the help of some clever methods. Take a look at the following example.

This time, we used two elements. The child element is a small ball that we hope to move in a curve. But in fact, we set the transform-origin of the parent element to make The parent element performed a transform: rotate() movement that drove the ball of the child element:

<div class="g-container">
    <div class="g-ball"></div>
</div>

.g-container {
    position: relative;
    width: 10vmin;
    height: 70vmin;
    transform-origin: center 0;
    animation: rotate 1.5s infinite alternate;
}
.g-ball {
    position: absolute;
    width: 10vmin;
    height: 10vmin;
    border-radius: 50%;
    background: radial-gradient(circle, #fff, #000);
    bottom: 0;
    left: 0;
}
@keyframes rotate {
    100% {
        transform: rotate(90deg);
    }
}

In order to facilitate understanding, during the movement, I let the outline of the parent element appear. Come out:

In this way, we can barely get a non-linear path motion animation, and its actual motion trajectory is a curve.

However, this is basically the limit of what CSS can do before. Using pure CSS methods, there is no way to achieve more complex path animations, such as the following path animation:

Until now, we have a more powerful specification dedicated to doing this, which is the protagonist of this article-- CSS Motion Path.

CSS Motion Path implements straight path animation

CSS Motion Path specification mainly includes the following attributes:

• ##offset- path: Receive an SVG path (similar to SVG path and clip-path in CSS), specify the geometric path of motion
• offset-distance: Control the current element based on offset-path Movement distance
• offset-position: Specify the initial position of offset-path
• offset -anchor: Defines the anchor point of the element positioned along offset-path. This is easy to understand. The moving element may not be a point, so you need to specify which point in the element is attached to the path for movement
• offset-rotate: define along offset-path is the direction of the element during positioning. In human terms, it means the angle of the element during movement.

Below, we use Motion Path to implement a simple linear displacement animation.

<div></div>

div {
    width: 60px;
    height: 60px;
    background: linear-gradient(#fc0, #f0c);
    offset-path: path("M 0 0 L 100 100");
    offset-rotate: 0deg;
    animation: move 2000ms infinite alternate ease-in-out;
}
@keyframes move {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}

offset-path Receives the path of an SVG. Here our path content is a custom path path("M 0 0 L 100 100") , translated as moving from 0 0 point to 100px 100px point.

offset-path Receives an SVG path specifying the geometric path of motion. Similar to SVG path and clip-path in CSS, if you don’t know much about this SVG Path, you can click here to learn about the SVG path content: SVG path

We will get the following results:

Perform path animation of the element by controlling the element's

offset-distance from 0% to 100%.

Of course, the above animation is the most basic. I can make full use of the characteristics of path, add multiple intermediate key frames, and slightly modify the above code:

div {
    // 只改变运动路径，其他保持一致
    offset-path: path("M 0 0 L 100 0 L 200 0 L 300 100 L 400 0 L 500 100 L 600 0 L 700 100 L 800 0");
    animation: move 2000ms infinite alternate linear;
}
@keyframes move {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}

这里最主要还是运用了 path 中的 L 指令，得到了如下图这样一条直线路径：

最终的效果如下，与利用 transform: translate() 添加多个关键帧类似：

完整的 Demo ：CodePen Demo -- CSS Motion Path Demo

地址：https://codepen.io/Chokcoco/pen/gOgqoem

CSS Motion Path 实现曲线路径动画

上面的运动轨迹都是由直线构成，下面我们看看如何使用 CSS Motion Path 实现曲线路径动画。

其实原理还是一模一样，只需要在 offset-path: path() 中添加曲线相关的路径即可。

在 SVG 的 Path 中，我们取其中一种绘制曲线的方法 -- 贝塞尔曲线，譬如下述这条 path，其中的 path 为 d="M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80"：

<svg width="400" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80" stroke="black" fill="transparent"/>
</svg>

对应这样一条连续的贝塞尔曲线：

将对应的路径应用在 offset-path: path 中：

<div></div>

div:nth-child(2) {
    width: 40px;
    height: 40px;
    background: linear-gradient(#fc0, #f0c);
    offset-path: path('M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80');
}
@keyframes move {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}

可以得到如下运动效果：

可以看到，元素是沿着贝塞尔曲线的路径进行运动的，并且，由于这次没有限制死 offset-rotate，元素的朝向也是跟随路径的朝向一直变化的。（可以联想成开车的时候，车头一直跟随道路会进行变化的，带动整个车身的角度变化）

完整的 Demo ：CodePen Demo -- CSS Motion Path Demo

地址：https://codepen.io/Chokcoco/pen/gOgqoem

理解 offset-anchor 运动锚点

OK，那么接下来，我们再看看 offset-anchor 如何理解。

还是上述的 DEMO，我们把小正方形替换成一个三角形，并且把运动的曲线给画到页面上，像是这样：

其中，三角形是通过 clip-path 实现的：

    width: 40px;
    height: 40px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: linear-gradient(#fc0, #f0c);

通常而言，沿着曲线运动的是物体的中心点（类比 transform-origin），在这里，我们可以通过 offset-anchor 改变运动的锚点，譬如，我们希望三角形的最下方沿着曲线运动：

.ball {
    width: 40px;
    height: 40px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    offset-path: path('M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80');
    offset-anchor: 0 100%;
    background: linear-gradient(#fc0, #f0c);
    animation: move 3000ms infinite alternate linear;
}
@keyframes move {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}

经过实测，Can i use 上写着 offset-anchor 属性的兼容性在为 Chrome 79+、Firefox 72+，但是实际只有 Firefox 支持，Chrome 下暂时无法生效~

完整的 Demo ：CodePen Demo -- CSS Motion Path offset-anthor Demo

地址：https://codepen.io/Chokcoco/pen/poRGZeE

运用 Motion Path 制作动画效果

OK，上面我们基本把原理给过了一遍，下面我们就看看，运用 Motion Path，可以在实践中如何运用。

利用 Motion Path 制作按钮效果

利用运动路径，我们可以制作一些简单的按钮点击效果。在之前，我在 CodePen 上见到过这样一种按钮点击效果：

其原理是运用了 background-radial 去生成每一个小圆点，通过控制 background-position 控制小圆点的位移

详细的 Demo 代码：CodePen Demo -- Bubbly button (Design by Gal Shir)

地址：https://codepen.io/Chokcoco/pen/bGGMLdd

但是小圆点的运动路径基本上都是直线，运用本文的 Motion Path，我们也可以实现一些类似的效果，核心代码如下，HTML 这里我们使用了 Pug 模板，CSS 使用了 SASS：

.btn
  -for(var i=0; i<60; i++)
    span.dot

.btn {
  position: relative;
  padding: 1.5rem 4.5rem;
}
.btn .dot {
  position: absolute;
  width: 4px;
  height: 4px;
  
  @for $i from 1 through $count { 
    &:nth-child(#{$i}) {
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0) rotate(#{360 / $count * $i}deg);
      }
  }
  
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    offset-path: path("M0 1c7.1 0 10.7 2 14.3 4s7.1 4 14.3 4 10.7-2 14.3-4 7.2-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4 10.7-2 14.3-4 7.1-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4 10.7-2 14.3-4 7.1-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4");
    offset-distance: 0;
  }
}

.btn.is-animating:active .dot:nth-child(4n+1)::before {
  animation: dot var(--animation-time) var(--animation-timging-function);
}
.btn.is-animating:active .dot:nth-child(4n+2)::before {
  border: 1px solid var(--color-primary);
  background: transparent;
  animation: dot var(--animation-time) var(--animation-timging-function) 0.1s;
}
.btn.is-animating:active .dot:nth-child(4n+3)::before {
  animation: dot var(--animation-time) var(--animation-timging-function) 0.2s;
}
.btn.is-animating:active .dot:nth-child(4n)::before {
  border: 1px solid var(--color-primary);
  background: transparent;
  animation: dot var(--animation-time) var(--animation-timging-function) 0.3s;
}

@keyframes dot {
  0% {
    offset-distance: 0%;
    opacity: 1;
  }
  90% {
    offset-distance: 60%;
    opacity: .5;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

别看代码多有一点点复杂，但是不难理解，本质就是给每个子元素小点点设置同样的 offset-path: path()，给不同分组下的子元素设定不同的旋转角度，并且利用了动画延迟 animation-delay 设定了 4 组同时出发的动画。

这里我们的轨迹 path 不是直线，效果如下：

Complete code: CodePen Demo -- Button Animation with CSS Offset Paths

Address: https://codepen.io/Chokcoco/pen/xxgMPzJ

Use Motion-Path to draw map path pathfinding animation

This is also very practical. Now we can fully use CSS Motion-Path to realize the pathfinding animation on the map. Pathfinding animation:

The Demo comes from Ahmad Emran, the complete code: CodePen Demo -- CodePen Home Animation with offset-path | Only Using CSS & HTML

Address: https://codepen.io/ahmadbassamemran/pen/bXByBv

Use Motion-Path to draw path animation

again Or, we can use Path to draw any path to realize various paths we want, such as parabolas added to shopping carts, or various motion trajectories. Here is another Demo:

CodePen Demo -- CSS Motion Path offset-path animation

Address: https://codepen.io/Chokcoco/pen/dyNaZea

Can i Use - Motion-Path

Let’s take a look at the current compatibility of Motion-Path? As of 2021-04-27.

Can i Use - Motion-Path:

#Currently, apart from the IE browser, we are waiting for when Safari will be compatible and whether to use it , but also need to make choices based on the browser usage of the target group.

Finally

Okay, this article ends here. It introduces the motion path animation Motion Path, and uses it to achieve some path animation effects that could not be easily achieved in the past. Hope it helps you:)

This article is reproduced from: https://segmentfault.com/a/1190000039916159

Author: chokcoco

More For more programming related knowledge, please visit: programming video! !

The above is the detailed content of What is the CSS motion path module? How to animate motion paths?. For more information, please follow other related articles on the PHP Chinese website!