Odległość odsunięcia - CSS-Tricks

Ta nieruchomość rozpoczęła życie jako motion-offset. Ta i wszystkie inne powiązane właściwości motion- * zmieniają nazwę na offset- * w specyfikacji. Zmieniamy nazwiska tutaj w almanachu. Jeśli chcesz go teraz użyć, prawdopodobnie najlepiej użyć obu składni.

motion-offsetNieruchomość w CSS mówi: jak daleko wzdłuż motion-pathjesteś? To jest animowana właściwość powiązana ze ścieżkami ruchu.

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

W powyższym przykładzie ustawiliśmy motion-offsetwartość początkową na 0%, chociaż warto zauważyć, że zero jest wartością domyślną, nawet jeśli nie została wyraźnie zdefiniowana (mogliśmy to pominąć).

Zmienne

offset-distanceWłaściwość przyjmuje następujące wartości:

length
percentage

W obu przypadkach wartość określa długość odległości od punktu początkowego ścieżki (domyślnie jest to 0pxlub 0%) do punktu końcowego ścieżki.

Przykład

W tym przykładzie mamy dwa okręgi, w których jeden mały okrąg porusza się po ścieżce większego okręgu.

Oto plik SVG, którego używamy do rysowania kształtów:

Teraz możemy ustawić .markerklasę w naszym CSS, aby podążała za .trackwspółrzędnymi klasy:

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

Zobacz prosty przykład pióra animacji wzdłuż ścieżki autorstwa Geoffa Grahama (@geoffgraham) na CodePen.

Podobnie, możemy zatrzymać offset-distancewartość na 50%, a animacja spadnie w połowie ścieżki:

Zobacz prosty przykład pióra animacji wzdłuż ścieżki autorstwa Geoffa Grahama (@geoffgraham) na CodePen.

Lub, aby kontrolować szybkość animacji, moglibyśmy pomnożyć offset-distancewartość do 300%, aby przyspieszyć działanie. Jeśli jednak określiliśmy czas trwania animacji z wartością większą niż czas potrzebny elementowi na pokonanie ścieżki, to ruch zatrzyma się do momentu zakończenia animacji przed powtórzeniem:

Zobacz prosty przykład pióra animacji wzdłuż ścieżki autorstwa Geoffa Grahama (@geoffgraham) na CodePen.

Wsparcie przeglądarki

ta offset-distancewłaściwość jest nadal uważana za funkcję eksperymentalną w momencie pisania tego tekstu i nie ma dokumentacji dotyczącej obsługi przeglądarek. Istnieje jednak dokumentacja dotycząca motion-pathwsparcia i na razie możemy ją wykorzystać jako podstawę.

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.