Разстояние от разстояние - CSS-трикове

Този имот започна живот като motion-offset. Това и всички други свързани с него свойства на движение се преименуват на 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%; ) )

Вижте Pen Simple Пример за анимация по пътека от Geoff Graham (@geoffgraham) на CodePen.

По същия начин можем да спрем offset-distanceстойността на 50% и анимацията ще отпадне наполовина около пътя:

Вижте Pen Simple Пример за анимация по пътека от Geoff Graham (@geoffgraham) на CodePen.

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

Вижте Pen Simple Пример за анимация по пътека от Geoff Graham (@geoffgraham) на CodePen.

Поддръжка на браузър

на offset-distanceимота все още се счита експериментална функция по време на това писание и няма документация за подкрепа браузър. Има обаче документация за motion-pathподдръжката и засега можем да я използваме като базова линия.

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.