CSS <time> Data Type

The CSS <time> data type represents a duration using seconds or milliseconds. Time values are commonly used to control the duration and delay of CSS animations, transitions, and other time-based features.

Syntax

A <time> value consists of a number followed immediately by either the s or ms unit:

0s
0.5s
2s
250ms
1500ms

There must be no space between the number and the unit. A unit is required even when the time value is zero.

Time Units

CSS provides two units for representing time:

Unit	Name	Description
`s`	Seconds	Represents a duration measured in seconds.
`ms`	Milliseconds	Represents a duration measured in thousandths of a second.

s Unit

The s unit represents seconds. Decimal values can be used to represent fractions of a second.

1s
2.5s
0.25s

For example, 0.25s represents one quarter of a second, or 250 milliseconds.

ms Unit

The ms unit represents milliseconds. One millisecond is one thousandth of a second.

100ms
250ms
500ms
1500ms

Milliseconds are useful when expressing short durations without using decimal fractions of a second.

Time Unit Conversions

Seconds and milliseconds can represent the same duration using different numeric values:

Seconds	Milliseconds
`0.1s`	`100ms`
`0.25s`	`250ms`
`0.5s`	`500ms`
`1s`	`1000ms`
`2s`	`2000ms`

One second always equals 1000 milliseconds.

Positive and Negative Values

The <time> data type can represent positive, negative, and zero values. However, individual CSS properties may restrict which time values are valid.

2s
0s
-1s

For example, animation and transition durations cannot be negative, while negative delay values are permitted and cause the animation or transition to begin as though it had already been running for the specified amount of time.

<time> Example

The following example uses a 2s time value to control how long a background color transition takes:

.time-example {
  background-color: #0088cc;
  transition: background-color 2s;
}
.time-example:hover {
  background-color: #d8f1fc;
}

Browser Result

The transition duration is 2 seconds.

The 2s value represents the duration of the transition. Time values can similarly control animation durations and delays.

The <time> data type is used by many animation and transition properties, including:

Specifications

The <time> data type is defined in the CSS Values and Units Module Level 4 .

CSS <time> Data Type