-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
62 lines (45 loc) · 1.39 KB
/
index.md
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
---
title: CSS motion path
slug: Web/CSS/CSS_motion_path
page-type: css-module
browser-compat: css.properties.offset-path
---
{{CSSRef}}
The **CSS motion path** module allows authors to animate any graphical object along a custom path.
The idea is that when you want to animate an element moving along a path, you previously only had animating translation, position, etc. at your disposal, which wasn't ideal and only allowed for simple movements. With {{cssxref("offset-path")}} you can define a specific path of any shape you want. You then animate it along that path by animating {{cssxref("offset-distance")}}, and can choose to rotate it at any point using {{cssxref("offset-rotate")}}.
## Basic example
```html
<div id="motion-demo"></div>
```
```css
#motion-demo {
offset-path: path("M20,20 C20,100 200,0 200,100");
animation: move 3000ms infinite alternate ease-in-out;
width: 40px;
height: 40px;
background: cyan;
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
```
{{EmbedLiveSample('Basic_example', '100%', 150)}}
## Reference
### Properties
- {{cssxref("offset")}}
- {{cssxref("offset-anchor")}}
- {{cssxref("offset-distance")}}
- {{cssxref("offset-path")}}
- {{cssxref("offset-position")}}
- {{cssxref("offset-rotate")}}
### Functions
- {{cssxref("ray")}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}