motion.json

{
  "spec": {
    "title": "Motion Path Module Level 1",
    "url": "https://www.w3.org/TR/motion-1/"
  },
  "properties": {
    "offset-path": {
      "name": "offset-path",
      "value": "none | ray() | path() | <url> | [ <basic-shape> || <geometry-box> ]",
      "initial": "none",
      "appliesTo": "transformable elements",
      "inherited": "no",
      "percentages": "n/a",
      "computedValue": "as specified",
      "canonicalOrder": "per grammar",
      "media": "visual",
      "animatable": "as <angle>, <basic-shape> or path()",
      "styleDeclaration": [
        "offset-path",
        "offsetPath"
      ]
    },
    "offset-distance": {
      "name": "offset-distance",
      "value": "<length-percentage>",
      "initial": "0",
      "appliesTo": "transformable elements",
      "inherited": "no",
      "percentages": "refer to the total path length",
      "computedValue": "For <length> the absolute value, otherwise a percentage.",
      "canonicalOrder": "per grammar",
      "media": "visual",
      "animatable": "yes",
      "styleDeclaration": [
        "offset-distance",
        "offsetDistance"
      ]
    },
    "offset-position": {
      "name": "offset-position",
      "value": "auto | <position>",
      "initial": "auto",
      "appliesTo": "transformable elements",
      "inherited": "no",
      "percentages": "Refer to the size of containing block",
      "computedValue": "For <length> the absolute value, otherwise a percentage.",
      "canonicalOrder": "per grammar",
      "media": "visual",
      "animatable": "as position",
      "styleDeclaration": [
        "offset-position",
        "offsetPosition"
      ]
    },
    "offset-anchor": {
      "name": "offset-anchor",
      "value": "auto | <position>",
      "initial": "auto",
      "appliesTo": "transformable elements",
      "inherited": "no",
      "percentages": "Relative to the width and the height of a box",
      "computedValue": "For <length> the absolute value, otherwise a percentage.",
      "canonicalOrder": "per grammar",
      "media": "visual",
      "animatable": "as <position>",
      "styleDeclaration": [
        "offset-anchor",
        "offsetAnchor"
      ]
    },
    "offset-rotate": {
      "name": "offset-rotate",
      "value": "[ auto | reverse ] || <angle>",
      "initial": "auto",
      "appliesTo": "transformable elements",
      "inherited": "no",
      "percentages": "n/a",
      "computedValue": "computed <angle> value, optionally preceded by auto",
      "canonicalOrder": "per grammar",
      "media": "visual",
      "animatable": "yes",
      "styleDeclaration": [
        "offset-rotate",
        "offsetRotate"
      ]
    },
    "offset": {
      "name": "offset",
      "value": "[ offset-position? [ offset-path [ offset-distance || offset-rotate ]? ]? ]! [ / offset-anchor ]?",
      "initial": "see individual properties",
      "appliesTo": "transformable elements",
      "inherited": "no",
      "percentages": "see individual properties",
      "computedValue": "see individual properties",
      "canonicalOrder": "per grammar",
      "media": "visual",
      "animatable": "see individual properties",
      "styleDeclaration": [
        "offset"
      ]
    }
  },
  "descriptors": {},
  "valuespaces": {
    "<ray()>": {
      "value": "ray( [ <angle> && <size> && contain? ] )"
    },
    "<path()>": {
      "value": "path(<string>)"
    },
    "<size>": {
      "prose": "Decides the path length used when offset-distance is expressed as a percentage, using the distance to the containing box. For <size> values other than sides, the path length is independent of <angle>. It is defined as: <size> = [ closest-side | closest-corner | farthest-side | farthest-corner | sides ]"
    }
  }
}