Офсет-дистанце - ЦСС-трикови

Ово својство је започело живот као motion-offset. Ово и сва остала сродна својства покрета-* у спецификацији се преименују у оффсет- *. Мењамо имена овде у алманаху. Ако желите да је користите одмах, вероватно је најбоље да користите обе синтаксе.

motion-offsetИмовина у ЦСС-у каже: колико 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%) до крајње тачке путање.

Пример

У овом примеру имамо два круга где један мали круг путује стазом већег круга.

Ево СВГ датотеке коју користимо за цртање облика:

Сада можемо да подесимо .markerкласу у нашем ЦСС-у да следи .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%; ) )

Погледајте оловку Једноставни пример анимирања дуж пута, Геофф Грахам (@геоффграхам) на ЦодеПен-у.

Слично томе, можемо зауставити offset-distanceвредност на 50% и анимација би пала на пола пута:

Погледајте оловку Једноставни пример анимирања дуж пута, Геофф Грахам (@геоффграхам) на ЦодеПен-у.

Или, да бисмо контролисали брзину анимације, могли бисмо да помножимо offset-distanceвредност на 300% да бисмо убрзали ствари. Међутим, ако смо одредили колико времена анимација ради на вредности већој од оног колико је потребно елементу да пређе путању, кретање ће се зауставити све док анимација не заврши свој интервал пре понављања:

Погледајте оловку Једноставни пример анимирања дуж пута, Геофф Грахам (@геоффграхам) на ЦодеПен-у.

Подршка прегледача

offset-distanceимовина се и даље сматра експериментална функција у време писања овог текста и не постоји документација о подршци претраживача. Међутим, постоји документација о motion-pathподршци и то засад можемо користити као основну линију.

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.