Відстань відстані - CSS-хитрощі

Ця властивість почала життя як motion-offset. Це та всі інші пов’язані з ним властивості руху * перейменовані в зміщення * у специфікації. Ми міняємо імена тут, в альманасі. Якщо ви хочете використовувати його прямо зараз, можливо, найкраще використовувати обидва синтаксиси.

motion-offsetВластивість в CSS говорить: як далеко уздовж motion-pathви? Це анімаційна властивість, пов’язана із шляхами руху.

.thing-that-moves ( /* "Old" syntax. Available in Blink browsers as of ~October 2015 */ motion-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); motion-offset: 0%; /* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 */ offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); offset-distance: 0%; animation: move 3s linear infinite; ) /* Animate the element along the path from 0% to 100% */ @keyframes move ( 100% ( motion-offset: 100%; /* Old */ offset-distance: 100%; /* New */ ) )

У наведеному вище прикладі ми встановили початкове motion-offsetзначення 0%, хоча варто зазначити, що нуль є значенням за замовчуванням, навіть якщо це не визначено явно (ми могли б це пропустити).

Змінні

offset-distanceВластивість набуває таких значень:

length
percentage

В обох випадках значення визначає довжину відстані від початкової точки шляху (за замовчуванням 0pxабо 0%) до кінцевої точки шляху.

Приклад

У цьому прикладі ми маємо два кола, де одне маленьке коло рухається по шляху більшого кола.

Ось файл SVG, який ми використовуємо для малювання фігур:

Тепер ми можемо встановити .markerклас у нашому CSS таким чином, щоб він дотримувався .trackкоординат класу:

/* The motion-offset is zero by default */ .marker ( offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); animation: move 3s linear infinite; ) @keyframes move ( /* Move the .marker from it's default value of 0% to 100% of the path's length */ 100% ( offset-distance: 100%; ) )

Див. Простий приклад ручки анімації вздовж шляху від Джеффа Грема (@geoffgraham) на CodePen.

Подібним чином, ми можемо зупинити offset-distanceзначення на 50%, і анімація впаде наполовину шляху:

Див. Простий приклад ручки анімації вздовж шляху від Джеффа Грема (@geoffgraham) на CodePen.

Або, щоб контролювати швидкість анімації, ми могли б помножити offset-distanceзначення на 300%, щоб пришвидшити процес. Однак якщо ми вказали кількість часу, протягом якого анімація виконується при значенні, більшому за те, що потрібно елементу, щоб пройти шлях, тоді рух зупиниться, поки анімація не закінчить свій інтервал перед повторенням:

Див. Простий приклад ручки анімації вздовж шляху від Джеффа Грема (@geoffgraham) на CodePen.

Підтримка браузера

offset-distanceвластивість ще вважається експериментальним і на момент написання цієї статті , і немає ніякої документації по підтримці браузера. Однак існує документація про motion-pathпідтримку, і ми можемо використовувати її як базову лінію на даний момент.

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.