<number>

The <number> CSS data type represents a number. A <number> can either be an <integer>, or it can be zero or more digits followed by a dot (.) followed by one or more digits. Real numbers may be preceded by a “-” (negative) or “+” (positive) to indicate the sign. -0 is equivalent to 0 and is not a negative number. Examples of numbers are 3, 1.86, -400.

A lot of CSS properties take numerical values, some are associated with a unit to indicate another data type such as a <length>, e.g 25px, others are not, such as z-index which takes an <integer> value. Integers are a subset of numbers.

Notes and Trivia

Real numbers and integers are specified in decimal notation only. Which means that 3/4 is not a valid number notation in CSS, nor are square roots and other non-decimal notations. The speed at which a transition takes place is specified using a CSS timing function.

Transitioning <number>s

Integers in CSS are transitionable. They are interpolated as real numbers to allow animations.

Note that even though numbers as a value as transitionable, this does not mean that any property that takes a number as a value is animatable. Some properties, such as the z-index property, take number values, but are not animatable. For a list of animatable properties, refer to this list and this list in the CSS Transitions specification.