The <time> CSS data type represents temporal values, typically dates or times, and is often used in conjunction with the HTML time element. It allows authors to provide semantic meaning for time-based content, which can be leveraged in styling, animations, and user interface enhancements. Unlike generic string values, <time> is specifically recognized as a temporal value, enabling more precise formatting and potential integration with scripts that manipulate date and time.

One of the key benefits of the <time> data type is that it can interact with CSS functions and properties that accept temporal values, such as animation-delay or transition-duration. This allows developers to create animations or transitions that are synchronized with specific time intervals. For example, you might define a transition that starts exactly 5 seconds after the page loads using a <time> value.

Additionally, the <time> data type is useful when combined with custom properties for dynamic styling. For instance, you can store a date or time in a CSS variable and reference it in animations or pseudo-elements. This enables more flexible and readable CSS code, particularly when designing timelines, countdowns, or time-based visual effects.

Here are some examples:

<time datetime="2026-01-03T10:00">January 3, 2026</time>

/* Example using <time> for animation-delay */
time {
  animation: fadeIn 2s ease-in-out;
  animation-delay: 5s; /* could be derived from a <time> value */
  display: inline-block;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Using a CSS variable to store a time value */
:root {
  --event-time: 10s; /* represents a time duration */
}

time::after {
  content: "⏱";
  animation: blink var(--event-time) infinite;
}

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

In essence, <time> provides a semantic and functional approach to representing temporal values in CSS, bridging the gap between content meaning and visual presentation. By leveraging it with properties like animation-delay or transition-duration, developers can create more intuitive, accessible, and time-aware designs.

property: <time>; 

• sRepresents a time in seconds.
• msRepresents a time in milliseconds

The following information will show you the current browser support for the CSS time data type. Hover over a browser icon to see the version that first introduced support for this CSS data type.

This data type is supported by all modern browsers.

Desktop

Tablets & Mobile