Before:
{
  "layers": [
    {
      "name": "LayoutView #document",
      "bounds": [785, 802],
      "contentsOpaque": true,
      "backgroundColor": "#FFFFFF"
    },
    {
      "name": "LayoutBlockFlow (relative positioned) DIV id='to-animate1' class='box animating1'",
      "bounds": [100, 100],
      "contentsOpaque": true,
      "backgroundColor": "#0000FF",
      "transform": 2
    },
    {
      "name": "LayoutBlockFlow (relative positioned) DIV class='container'",
      "position": [47, 230],
      "bounds": [144, 452],
      "backgroundColor": "#FFFFFF"
    },
    {
      "name": "Squashing Containment Layer",
      "position": [47, 230],
      "drawsContent": false
    },
    {
      "name": "LayoutBlockFlow (relative positioned) DIV class='box gray force-layer'",
      "bounds": [100, 100],
      "contentsOpaque": true,
      "backgroundColor": "#808080",
      "transform": 4
    },
    {
      "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (relative positioned) DIV class='box yellow')",
      "position": [18, 692],
      "bounds": [100, 100]
    }
  ],
  "transforms": [
    {
      "id": 1,
      "transform": [
        [...],
        [...],
        [...],
        [...]
      ]
    },
    {
      "id": 2,
      "parent": 1,
      "transform": [
        [...],
        [...],
        [...],
        [...]
      ]
    },
    {
      "id": 3,
      "transform": [
        [...],
        [...],
        [...],
        [...]
      ],
      "flattenInheritedTransform": false
    },
    {
      "id": 4,
      "parent": 3,
      "transform": [
        [...],
        [...],
        [...],
        [...]
      ],
      "flattenInheritedTransform": false
    }
  ]
}

After:
{
  "layers": [
    {
      "name": "LayoutView #document",
      "bounds": [785, 802],
      "contentsOpaque": true,
      "backgroundColor": "#FFFFFF"
    },
    {
      "name": "LayoutBlockFlow (relative positioned) DIV id='to-animate1' class='box animating1'",
      "bounds": [100, 100],
      "contentsOpaque": true,
      "backgroundColor": "#0000FF",
      "transform": 2
    },
    {
      "name": "LayoutBlockFlow (relative positioned) DIV class='container'",
      "position": [58, 230],
      "bounds": [122, 452],
      "contentsOpaque": true,
      "backgroundColor": "#FFFFFF"
    },
    {
      "name": "Squashing Containment Layer",
      "position": [58, 230],
      "drawsContent": false
    },
    {
      "name": "LayoutBlockFlow (relative positioned) DIV class='box gray force-layer'",
      "bounds": [100, 100],
      "contentsOpaque": true,
      "backgroundColor": "#808080",
      "transform": 4
    },
    {
      "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (relative positioned) DIV id='first-green-box' class='box green rotate-45deg')",
      "position": [18, 328],
      "bounds": [174, 464]
    }
  ],
  "transforms": [
    {
      "id": 1,
      "transform": [
        [...],
        [...],
        [...],
        [...]
      ]
    },
    {
      "id": 2,
      "parent": 1,
      "transform": [
        [...],
        [...],
        [...],
        [...]
      ]
    },
    {
      "id": 3,
      "transform": [
        [...],
        [...],
        [...],
        [...]
      ],
      "flattenInheritedTransform": false
    },
    {
      "id": 4,
      "parent": 3,
      "transform": [
        [...],
        [...],
        [...],
        [...]
      ],
      "flattenInheritedTransform": false
    }
  ]
}