MENU


Offset

offset(shorthand)

...offset-path (more in the SVG tutorial here)
: none
: ray(45deg closest-side contain)
: url(#path)
: circle(50% at 25% 25%)
: inset(50% 50% 50% 50%)
: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%)
: path('M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200')
: margin-box
: stroke-box

...offset-rotate
: auto: rotates as the object heads into different directions.
: 60deg: be fixed at a rotation of 60deg.
: auto 45deg: rotates as it switches directions with a fixed offset of 60deg.
: reverse: like 'auto', but +180deg.

...offset-distance
: 30%: the position along 'offset-path'

...offset-anchor (experimental)
: right top: aligns the top-right corner of the object to the offset-path.
: top
: bottom
: left
: right
: center
: auto
: 25% 75%
: 0 0
: 1ch 2cm: x y
: bottom 10px right 20px: y-offset, x-offset


RESETRUNFULL
<!DOCTYPE html><html><head><style>
   @keyframes anim{  
      from { background:yellow; offset-distance: 0%;}   
      60% { background:white; offset-distance: 30%;}    
      to { background:green; offset-distance: 100%;}
   }
   div {
      width:100px;    
      height: 100px;    
      position: relative;    
      background: yellow;
      offset: path("M 100 100 L 300 100 L 200 300 z")  reverse 60deg;    
      offset-anchor: right bottom;    
      animation: anim 2s 0s alternate infinite;
   }
</style></head><body style="height:400px;">   
   <div>A moving box with a changing color.</div>
</body></html>