Перейти к содержанию

offset

Сокращенное свойство offset задает все свойства, необходимые для анимации элемента по заданному пути.

Ранние версии спецификации называли это свойство motion.

Демо

Пути перемещения

Это свойство является сокращением для следующих свойств CSS:

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* Offset position */
offset: auto;
offset: 10px 30px;
offset: none;

/* Offset path */
offset: ray(45deg closest-side);
offset: path('M 100 100 L 300 100 L 200 300 z');
offset: url(arc.svg);

/* Offset path with distance and/or rotation */
offset: url(circle.svg) 100px;
offset: url(circle.svg) 40%;
offset: url(circle.svg) 30deg;
offset: url(circle.svg) 50px 20deg;

/* Including offset anchor */
offset: ray(45deg closest-side) / 40px 20px;
offset: url(arc.svg) 2cm / 0.5cm 3cm;
offset: url(arc.svg) 30deg / 50px 100px;

/* Global values */
offset: inherit;
offset: initial;
offset: revert;
offset: revert-layer;
offset: unset;

Поддержка браузерами

Спецификация

Пример

Анимация элемента вдоль пути

1
<div id="offsetElement"></div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
@keyframes move {
    from {
        offset-distance: 0%;
    }

    to {
        offset-distance: 100%;
    }
}

#offsetElement {
    width: 50px;
    height: 50px;
    background-color: blue;
    offset: path('M 100 100 L 300 100 L 200 300 z') auto;
    animation: move 3s linear infinite;
}

Комментарии