Расстояние смещения - CSS-хитрости

Это свойство начало свою жизнь как motion-offset. Это и все другие связанные свойства 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, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.