CSS <time> Data Type

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

HTML

<div class="loading"> 

   <div class="spin"></div> 

   <p>Loading...</p> 

</div>

CSS

.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); 
   } 
}

Result

Editor