<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
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.
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.
The following are all valid numbers:
-3, 9.999999, -17.5, 443, -90, 20000, 55.8765, -0.3, 0.
The following are invalid values for numbers:
2.4.9 (only one decimal point is allowed),
--+35 (only one leading sign is allowed).
Number values are supported in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.