Explore the magical motion path animation motion path

Time:2021-9-12

There is a very interesting module in CSS–CSS Motion Path Module Level 1, which translates to motion path. This article will explore the motion path. Through this article, you can learn:

  • What is CSS motion path
  • Simple path animation using CSS motion path
  • Use CSS motion path to animate complex paths

What is CSS motion path?

What is CSS motion path? Using the attributes specified in this specification, we can control the animation of position transformation of elements according to a specific path. Moreover, this path can be a very complex path.

Before further introducing CSS motion path, let’s take a look at the ability of using traditional CSS and how we can realize path animation.

CSS traditional way to realize straight line path animation

Before, we want to move an object in a straight line from point a to point B. generally speaking, it can be usedtransform: translate()top | left | bottom | rightOrmarginProperties that can change the position of an object.

A simple demo:

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

For simple linear motion from point a to point B, the effect is as follows:

Explore the magical motion path animation motion path

CSS traditional way to achieve curve path animation

Of course, CSS can also realize some simple curve path animation. If we want to move from point a to point B, not a straight line, but a curve, what should we do?

For some simple arc curve paths, some ingenious methods can be used to realize them. Take a look at the following example.

This time, we use two elements. The child element is a small ball that we want to be moved by a curve, but in fact, we set the parent elementtransform-origin, let the parent elementtransform: rotate()The movement of drives the small ball of the sub 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);
    }
}

For ease of understanding, in the process of movement, I let the outline of the parent element appear:

Explore the magical motion path animation motion path

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 that CSS can achieve before. Using pure CSS, there is no way to achieve more complex path animation, such as the following path animation:

Until now, we have a more powerful specification for doing this, that is, the protagonist of this article–CSS Motion Path

CSS motion path to realize straight line path animation

CSS motion path specification mainly includes the following properties:

  • offset-path: receive an SVG path (similar to SVG path and clip path in CSS), and specify the geometric path of motion
  • offset-distanceControls the current element based on:offset-pathDistance of motion
  • offset-position: specifyoffset-pathInitial position of
  • offset-anchor: define alongoffset-pathAnchor point for the positioned element. It is also easy to understand that the moving element may not be a point, so you need to specify which point in the element is attached to the path for motion
  • offset-rotate: define alongoffset-pathWhen positioning, the direction of the element is the angle of the element during the movement

Next, we use motion path to realize a simple linear displacement animation.

<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-pathReceive an SVG path. Here, our path content is a user-defined pathpath("M 0 0 L 100 100"), translated from0 0Point movement to100px 100pxPoint.

offset-pathReceive an SVG path and specify the geometric path of the motion. Similar to the SVG path and the clip path in CSS, you can stamp the SVG path you don’t know much about. Here’s the content of the SVG path:Svg path

We will get the following results:

Explore the magical motion path animation motion path

By controlling the of elementsoffset-distancefrom0%Change to100%Animate the path of the element.

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 {
    //Only change the motion path and keep the others consistent
    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%;
    }
}

The most important thing here is to use the in pathLCommand to obtain a straight line path as shown in the following figure:

Explore the magical motion path animation motion path

The final effect is as follows, and utilizationtransform: translate()Adding multiple keyframes is similar to:

Explore the magical motion path animation motion path

For the complete demo, you can stamp here:CodePen Demo — CSS Motion Path Demo

Realizing curve path animation with CSS motion path

The above motion tracks are composed of straight lines. Let’s see how to use CSS motion path to realize curve path animation.

The principle is as like as two peas.offset-path: path()Add the path related to the curve in the.

In the path of SVG, we take one of the methods for drawing curves – Bessel curve, such as the following path, where the path isd="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>

Corresponding to such a continuous Bessel curve:

Explore the magical motion path animation motion path

Apply the corresponding path tooffset-path: pathMedium:

<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%;
    }
}

The following movement effects can be obtained:

Explore the magical motion path animation motion path

As you can see, the element moves along the path of the Bezier curve, and because there is no limit this timeoffset-rotate, the orientation of the element also changes with the orientation of the path. (it can be thought that when driving, the front of the car will change all the time following the road, driving the angle change of the whole body)

For the complete demo, you can stamp here:CodePen Demo — CSS Motion Path Demo

Understanding offset anchor motion anchors

OK, so next, let’s take a lookoffset-anchorHow to understand.

In the demo above, we replace the small square with a triangle, and draw the motion curve on the page, like this:

Explore the magical motion path animation motion path

Where the triangle is throughclip-pathAchieved:

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

Explore the magical motion path animation motion path

Generally speaking, what moves along a curve is the center point of the object (analogy)transform-origin), here, we can passoffset-anchorChange the anchor point of motion. For example, we want the lowest part of the triangle to move along the curve:

.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%;
    }
}

Explore the magical motion path animation motion path

After actual measurement, can I use saysoffset-anchorThe compatibility of attributes is chrome 79 + and Firefox 72 +, but it is actually only supported by Firefox, and it cannot take effect under Chrome for the time being~

For the complete demo, you can stamp here:CodePen Demo — CSS Motion Path offset-anthor Demo

Using motion path to create animation effects

OK, we’ve given the basic principles above. Now let’s see how motion path can be used in practice.

Making button effects with motion path

Using the motion path, we can make some simple button click effects. Before, I saw such a button click effect on codepen:

Explore the magical motion path animation motion path

The principle is to usebackground-radialTo generate each dot by controllingbackground-positionControl the displacement of small round points. For the detailed demo code, you can stamp here:

CodePen Demo — Bubbly button (Design by Gal Shir)

However, the motion paths of small circles are basically straight lines. Using the motion path in this paper, we can also achieve some similar effects. The core code is as follows. Html is used herePugTemplate, CSS usedSASS

.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;
  }
}

Although the code is a little more complex, it is not difficult to understand. The essence is to set the same value for each child element offset-path: path(), different rotation angles are set for sub elements in different groups, and animation delay is usedanimation-delaySet up 4 groups of animations to start at the same time.

Here, our track path is not a straight line, and the effect is as follows:

Explore the magical motion path animation motion path

The complete code you can stamp here:

CodePen Demo — Button Animation with CSS Offset Paths

Using motion path to draw map path finding animation

This is also very practical. Now we can fully use CSS motion path to realize the wayfinding animation on the map:

Explore the magical motion path animation motion path

The demo is from Ahmad emran. You can stamp the complete code here:

CodePen Demo — CodePen Home Animation with offset-path | Only Using CSS & HTML

Drawing path animation with motion path

Alternatively, we can use the feature that path can draw any path to realize all kinds of paths we want, such as adding parabola to shopping cart or all kinds of motion tracks. Here is another Demo:

Explore the magical motion path animation motion path

CodePen Demo — CSS Motion Path offset-path animation

Can i Use – Motion-Path

Let’s take a look at the current compatibility of motion path? As of April 27, 2021.

Can i Use – Motion-Path

Explore the magical motion path animation motion path

At present, in addition to IE browser, we will wait for safari to be compatible and whether to use it or not. We also need to make a choice according to the browser usage of the target group.

last

Well, this article ends here, introducing the motion path animation motion path, and using it to realize some path animation effects that can not be easily realized in the past. I hope it will be helpful to you:)

If you want Get to get the most interesting CSS information, don’t miss my official account.ICSS front end anecdotes 😄

Explore the magical motion path animation motion path

More wonderful CSS technical articles are summarized in myGithub — iCSS, continuously updated. Welcome to a star subscription collection.

If you have any questions or suggestions, you can communicate more. The original articles have limited writing style and shallow talents. If there is anything wrong in the article, please let me know.