Transform origin

This property (a CSS property) is used to set the point around which an element is transformed. When you apply transformations like rotation, scaling, or skewing to an element, transform-origin lets you choose the center or a specific point of the element as the reference for those transformations.

By words:
Scale the element down to 50% when the element’s center hits the viewport’s center. Let the animation take 2 seconds. 
The first Block has a Transform origin set to Bottom Left, while the purple one uses Top Right.