CSS <time> Data Type

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The CSS time data type represents a time value expressed in seconds or milliseconds. It is used in animation, transition, and related properties.

The syntax for the time data type is a <number> followed by one of the following units:

  • s (seconds)
  • ms (milliseconds)

The number may optionally be preceded by a single + or - sign.

For example, the following CSS values are all valid time values:

5s
1000ms
+2s
-500ms

The time data type can be used to specify the duration of an animation, the delay before an animation starts, or the duration of a transition. For example, the following CSS code would animate the background-color property of an element from red to blue over a period of 5 seconds:

.element {
  background-color: red;
  animation: background-color-change 5s;
}

@keyframes background-color-change {
  from {
    background-color: red;
  }
  to {
    background-color: blue;
  }
}

The time data type can also be used to specify the minimum and maximum values for a CSS property. For example, the following CSS code would ensure that the height property of an element is always between 100px and 200px:

.element {
  height: 100px;
  min-height: 100px;
  max-height: 200px;
}

The time data type is a powerful tool that can be used to control the timing of animations and transitions, as well as the minimum and maximum values of CSS properties.

Syntax

property: <time>; 

Values

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

Example

<div class="loading"> 
<div class="spin"></div>
<p>Loading...</p>
</div>
.loading { 
   width: 240px; 
   margin: auto; 
   padding: 20px 0 10px; 
   background: #333; 
   color: #fff; 
   text-align: center; 
} 
.spin {
   display: inline-block; 
   width: 30px; 
   height: 30px; 
   border: 10px solid #ccc; 
   border-right: 10px solid transparent; 
   border-radius: 30px; 
   animation: spin 2s linear 0s infinite normal; 
}
@keyframes spin { 
   from { 
      transform: rotate(0deg); 
   } 
   to { 
   transform: rotate(360deg); 
   } 
}

Browser Support

The following table will show you the current browser support for the CSS time data type.

Desktop
Edge Chrome Firefox Opera Safari
121410.13.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.1212

Last updated by CSSPortal on: 7th October 2023