CSS ray() Function

Definition and Usage

CSS ray() The function defines the offset path segment that the animation element should follow, which is called 'ray'. The ray starts from the offset position and extends in the direction of the specified angle.

ray() Function with offset-path properties are used together.

Instance

Example 1

Ray from 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

Example 2

using offset-path and ray() Implement the animation effect:

 #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 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:

  • closest-side - (Default) The distance between the starting point of the ray and the closest side of the containing block.
  • closest-corner - The distance between the starting point of the ray and the closest corner of the containing block.
  • farthest-side - The distance between the starting point of the ray and the farthest side of the containing block.
  • farthest-corner - The distance between the starting point of the ray and the farthest corner of the containing block.
  • sides - The distance between the starting point of the ray and the intersection point between the line segment and the boundary of the containing block.
contain Optional. Shortens the length of the ray to ensure that the element remains within the containing block even when offset-distance: 100%.
at position

Optional. Specifies the starting point of the ray and the position of the element within the containing block.

If omitted, the element's offset-position value is used.

If the element does not have an offset-position value, the element is placed at the center of the containing block (i.e., 50% 50%).

Technical Details

Version: CSS Motion Path Module Level 1

Browser Support

The numbers in the table indicate the browser version that first fully supports this function.

Chrome Edge Firefox Safari Opera
116 116 122 17 102

Related Pages

Reference:offset-path attribute