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.
Examples
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).
Browser Support
Number values are supported in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.