The <time-percentage> CSS data type represents a value that can be either a <time> or a <percentage>.


Refer to the documentation for <time> and <percentage> for details of the individual syntaxes allowed by this type.


Use in calc()

Where a <time-percentage> is specified as an allowable type, this means that the percentage resolves to a time and therefore can be used in a calc() expression.

Valid percentages

+50%        Optional plus sign
-50%        Negative percentages are not valid for all properties that accept percentages

Invalid percentages

50 %        Space not allowed between the space and the percentage sign

Valid times

12s         Positive integer
-456ms      Negative integer
4.3ms       Non-integer
14mS        The unit is case-insensitive, although capital letters are not recommended.
+0s         Zero with a leading + and a unit
-0ms        Zero with a leading - and a unit

Invalid times

0           Although unitless zero is allowed for <length>s, it's invalid for <time>s.
12.0        This is a <number>, not a <time>, because it's missing a unit.
7 ms        No space is allowed between the number and the unit.


Specification Status Comment
CSS Values and Units Module Level 4
The definition of '<time-percentage>' in that specification.
Editor's Draft
CSS Values and Units Module Level 3
The definition of '<time-percentage>' in that specification.
Candidate Recommendation Defines <time-percentage>. Adds calc()

Browser compatibility

ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
<time-percentage>Chrome Full support 1Edge Full support 12Firefox Full support 4IE Full support 9Opera Full support 10.1Safari Full support 3.1WebView Android Full support 2Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 2Samsung Internet Android Full support 1.0


Full support
Full support