How deeply does Tiny CSS Projects cover scaleY function?

Explains syntax, value ranges, vertical flipping, page-flow behavior, and a keyframe example, but defers animation timing details.

scaleY function

As explained in Tiny CSS Projects

The CSS scaleY() transform function scales an element along its vertical axis.

The CSS scaleY() transform function resizes an element vertically without changing its width or its space in page flow. Unlike changing height, it changes only the visible appearance, so surrounding content does not move. section 3.4.1

Pass scaleY() a number or percentage to control vertical size:

scaleY(0.5) and scaleY(50%) reduce the original height to 50%. section 3.4.1
Values above 100% enlarge the element; values between 0% and 100% shrink it. section 3.4.1
Negative values flip the element vertically while scaling it; scaleY(-0.5) flips and halves its height. section 3.4.1

Animating loader bars

A keyframe can keep rectangles at full height at the beginning and end while shrinking them to 20% halfway through: from { transform: scaleY(1) }, 50% { transform: scaleY(0.2) }, and to { transform: scaleY(1) }. Applying the keyframe alone does not animate the rectangles; duration and iteration count are still required. section 3.4.1

Listing 3.7 Completed keyframe

@keyframes doScale {                   #1
  from { transform: scaleY(1) }        #2
  50% { transform: scaleY(0.2) }       #3
  to { transform: scaleY(1) }          #4
}                                      #5
rect { animation-name: doScale; }      #6

View the completed doScale keyframe and its application to rect elements. section 3.4.1

How Tiny CSS Projects covers it

liveBook manning.com

Read Tiny CSS Projects on liveBook Get the book at manning.com

Related concepts

scalepart of · Scale is a CSS transformation that enlarges or reduces an element along one or more dimensions without changing its layout dimensions.
CSS transform propertyused by · The CSS transform property applies two-dimensional or three-dimensional geometric transformations, such as translation, rotation, scaling, and skewing, to an element’s rendering.
functionkind of · A function is a defined operation that maps inputs to outputs and, when implemented as a callable program unit, may also produce effects.

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.