Odmak-udaljenost - CSS-trikovi

Ovo je svojstvo započelo život kao motion-offset. Ovo i sva ostala srodna svojstva pokreta- * u specifikaciji se preimenuju u offset- *. Mijenjamo imena ovdje u almanahu. Ako ga želite koristiti odmah, vjerojatno najbolje koristiti obje sintakse.

motion-offsetNekretnina u CSS kaže: koliko daleko duž motion-pathste? Ovo je animirano svojstvo povezano s putovima kretanja.

.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 */ ) )

U gornjem primjeru postavili smo početnu motion-offsetvrijednost na 0%, iako vrijedi napomenuti da je nula zadana vrijednost, čak i ako nije izričito definirana (to bismo mogli izostaviti).

Varijable

offset-distanceNekretnine prihvaća sljedeće vrijednosti:

length
percentage

U oba slučaja vrijednost određuje duljinu udaljenosti od početne točke puta (zadana vrijednost je 0pxili 0%) do krajnje točke staze.

Primjer

U ovom primjeru imamo dva kruga gdje jedan mali krug putuje stazom većeg kruga.

Evo SVG datoteke koju koristimo za crtanje oblika:

Sada možemo postaviti .markerklasu u našem CSS-u da slijedi .trackkoordinate klase:

/* 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%; ) )

Pogledajte olovku Jednostavni primjer animiranja putem, Geoff Graham (@geoffgraham) na CodePenu.

Slično tome, možemo zaustaviti offset-distancevrijednost na 50% i animacija bi pala na pola puta:

Pogledajte olovku Jednostavni primjer animiranja putem, Geoff Graham (@geoffgraham) na CodePenu.

Ili, da bismo kontrolirali brzinu animacije, mogli bismo pomnožiti offset-distancevrijednost na 300% da bismo ubrzali stvari. Međutim, ako smo naveli koliko vremena animacija radi na vrijednosti većoj od onog koliko je potrebno elementu da pređe put, tada će se kretanje zaustaviti sve dok animacija ne završi svoj interval prije ponavljanja:

Pogledajte olovku Jednostavni primjer animiranja putem, Geoff Graham (@geoffgraham) na CodePenu.

Podrška preglednika

offset-distancenekretnina i dalje smatra Eksperimentalna značajka u vrijeme pisanja ovog teksta i ne postoji dokumentacija o podršci preglednika. Međutim, postoji dokumentacija o motion-pathpodršci i zasad je možemo koristiti kao početnu liniju.

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.