CSS ray() Function
Example
Rays with different angles:
#square1 {
width: 65px;
height: 65px;
background: yellow;
offset-position: bottom right;
offset-path: ray(45deg);
}
#square2 {
width: 65px;
height: 65px;
background: pink;
offset-position: top right;
offset-path:
ray(-25deg);
}
#square3
{
width: 65px;
height: 65px;
background: salmon;
offset-position: bottom left;
offset-path: ray(90deg);
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS ray() function defines the
offset-path line segment that an animated element
should follow. The line segment
is called "ray". The ray begins from an
offset-position and goes in
the direction of the specified angle.
The ray() function is used with the
offset-path property.
| Version: | CSS Motion Path Module Level 1 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| ray() | 116 | 116 | 122 | 17 | 102 |
CSS Syntax
ray(angle
size contain at position)
| Value | Description |
|---|---|
| angle | Required. Specifies the direction/angle of the ray |
| size | Optional. Specifies the length of the ray, which is the
distance between offset-distance 0% and 100%, relative to the containing
box. It accepts one of the following keyword values:
|
| contain | Optional. Reduces the length of ray to assure that the element stays within the containing block even at offset-distance: 100% |
| at position | Optional. Specifies the starting point of the ray and where the element is placed in its containing block. If omitted, it uses the offset-position value of the element. If the element does not have an offset-position value, the element is placed at the center (or 50% 50%) of the containing block |
More Examples
Example
Animation of offset-path and ray():
#frameDiv {
width: 200px;
height: 200px;
margin: 20px;
position: relative;
border: solid black 1px;
background-color: rgb(205, 242, 205);
}
#frameDiv > div {
width: 50px;
height: 50px;
background-color: hotpink;
offset-path:
ray(45deg);
animation: moveDiv 3s 3;
}
@keyframes moveDiv {
100% { offset-distance: 100%;
}
}
Try it Yourself »
CSS reference: offset-path property.
