This is the 6th day of my participation in the August More Text Challenge

What is motion Path? I’m sure that’s your first reaction to it. Yes, this time I’m going to write another blog about the unpopular but useful CSS properties, and another one about the clip-path properties

Follow me as I explore this awesome but unusual property

【 Motion Path 】

Motion Path, which translates as motion path, is a specification that defines the attributes of how an element moves. We can use it to control the position of elements to follow a particular path and that path can be a very complex path, as you can see from the description here this specification is not simple

Say how the element position transformation, I believe in you mind first reaction must be using the transform, top | left | | bottom right, such as margin can change the attribute of object location, yes, it is now standard practice (old methods ðŸĪŠ), The following uses a basic position shift as an example to illustrate the differences between old and new

The old way 😑

Without further ado, go straight to the code!

<div></div>


/* top | left | bottom | right */
div{
  width: 100px;
  height: 100px;
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
  animation: move 1s linear infinite alternate;
}
@keyframes move {
  100% {
    top:100px;
    left:100px; }}/* transform */
div{
  width: 100px;
  height: 100px;
  background-color: black;
  animation: move 1s linear infinite alternate;
}
@keyframes move {
  100% {
    transform: translate(100px.100px); }}/* margin */
div{
  width: 100px;
  height: 100px;
  background-color: black;
  animation: move 1s linear infinite alternate;
}
@keyframes move {
  100% {
    margin: 100px 0 0 100px; }}Copy the code

I’m sure you know all of these “old ways” by heart, so it’s time for motion Path, the hero of this article

New method [Motion Path] 😍

Motion Path defines five attributes, listed below

  • Offset-path: Receives an SVG path (similar to path in SVG and clip-path in CSS), specifying the path of the motion
  • Offset-distance: Controls how far the current element moves based on offset-path
  • Offset-position: specifies the initial position of offset-path
  • Offset-anchor: defines the anchor point of the element positioned along the offset-path. This is also easy to understand. The moving element may not be a point, so it is necessary to specify which point in the element is attached to the path for movement. Generally speaking, what moves along the path is the geometric center of the object (analogous to transform-origin). For example, when we want the point at the lower left corner of the element to move along the path, we can set offset-anchor: 0 100%;
  • Offset-rotate: defines the orientation of elements along the offset-path. In human terms, the Angle of elements during movement is used

From the description of each attribute, we have a general idea of their meanings and usage, so we can use the Motion Path to achieve the above effect, the code!

<div></div>


div {
  width: 100px;
  height: 100px;
  background: black;
  offset-rotate: 0deg;
  offset-path: path("M 0 0 L 100 100");
  animation: move 1s linear infinite alternate;
}
@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%; }}Copy the code

Explain what the above code means: Offset-path receives an SVG path. Here we have a custom path path(“M 00 L 100 100”), which translates as moving from 0 to 100px 100px in a straight line

In fact, this example does not show the power of Motion Path at all, because in this example, we simply define the path of a straight line, but the path can be any form (polyline, curve…). The only limit that exists is our imagination

Take the broken path as an example to feel the power of Motion Path

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(#fc0.#f0c);
  offset-rotate: 0deg;
  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"); /* Only change the path */
  animation: move 2000ms linear infinite alternate;
}
@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%; }}Copy the code

Here we define a path as follows

The end result is as follows

Finally, the coordinate reference system in the offset-path attribute value is the container element of the moving element. Starting from the upper left corner of the container element, the x axis gradually increases to the right and the Y axis gradually increases downward. Meanwhile, it should be noted that the coordinate value represents the position of the offset-anchor of the moving element. Not the position of the upper left corner of the motion element

Motion Path compatibility

As you can see from the above, Motion Path is very powerful and can do a lot of cool things with it, but in the Web world, the more awesome the properties and methods are, the less compatible they are

It’s the same as Clip-Path, but it doesn’t shine because of compatibility issues. Let’s look at the compatibility of Motion Path

You can see that both Ie and Safari are not supported. 😞

conclusion

In fact, there are still a lot of cool and useful CSS properties, just because of compatibility issues are hidden, but I believe that with the development of the front-end field, a lot of things in the old era will be eliminated

So I believe that these awesome attributes will always shine, but also need a little time to stop, well, write so much, the end, scatter flowers 🎉

reference

Explore the mysterious Motion Path animation Motion Path

A little request

Since you see here, if you like my article, so please move your finger, help me to like or collect my article, XDM support is the biggest power of my creation, my own computer is not fun!

Recently, I set up a personal blog, which will publish my article first. I hope that interested partners can browse, if you can comment and leave a message, it will be better. I am looking forward to your visit

Recommended reading

ðŸ‘ī : Using CSS to draw triangles

It’s time to polish the front end of Babel 🊓

It’s time to get to know AST, a familiar but strange friend

A tour of the clip-path property 🧐

[Suggested collection] Take you hand in hand to explore the mystery of data encryption 😉~ | More challenges in August

All that stuff about web screenshots

How to deploy and manage Node applications using PM2

Docker + Jenkins + Githook builds an automated build release process

Introduction to Vue3