⛈️ ◾️ 🥙 Motion Path: Pengantar Animasi Modern 🖕🏼 🕵🏼 🧘🏿

Pernah ingin membuat beranda animasi yang indah untuk situs web Anda? Bagaimana dengan menghadirkan produk andalan Anda yang terbaik dengan animasi yang dibuat dengan cermat? Bagaimana dengan menarik perhatian pengguna ke tautan menu mengikuti jalur yang rumit?

Untuk memenuhi keinginan tersebut, yang relevan untuk dunia modern pengembangan web, modul CSS Motion Path Module Level 1 memungkinkan untuk menggunakan jenis animasi yang sama sekali baru dan memungkinkan Anda untuk memindahkan elemen HTML di sepanjang lintasan yang diberikan.

Dukungan browser

Mari kita mulai dengan momen yang tidak menyenangkan. Kami harus mengecewakan penggemar Safari (OS X dan iOS) dan Internet Explorer (jika ada): properti modul Motion Path belum didukung oleh semua browser .

Namun, pada saat penulisan ini , sekitar 75% pengunjung situs Anda memiliki kesempatan untuk menikmati teknologi modern ini.

, — . -.

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-, - - .

Silakan bagikan dalam komentar praktik terbaik Anda tentang topik artikel atau contoh favorit Anda dari Internet.

Motion Path: Pengantar Animasi Modern