CSS Data Type - <time>

The CSS <time> data type represents a duration of time. It is used in properties where a time value is expected, such as animation-duration, transition-duration, and certain other properties. The value for <time> can be specified in seconds (s), milliseconds (ms), or other time units.

Possible Values

Following units can be used with the <time> data type:

s - Denotes a time interval expressed in seconds.
ms - Denotes a time interval expressed in milliseconds.

Syntax

<number>unit

The <number> in the <time> data type is followed by the particular units mentioned above. Either a single + or - sign may optionally precede it.

The unit literal and the number should not be separated, just like in other dimensions.

CSS <time> - Valid Syntax

Following is the list of valid times:

Time	Description
19.6	Positive integer
-123ms	Negative integer.
2.6ms	Non-integer
10mS	Although it's not necessary to use capital letters, the unit is case-insensitive.
+0s	Zero with a unit and a leading +
-0ms	Zero, a unit, and a leading -

CSS <time> - InValid Syntax

Following is the list of invalid times:

Time	Description
0	Unitless zero is not valid for <time>s, however it is allowed for <length>s.
14.0	This lacks a unit, therefore it's a <number> rather than a <time>.
9 ms	No space is allowed between the number and the unit.

CSS <time> - Valid/Invalid Time Check

The following example allows you to check the provided input is valid or invalid time

<html>
<head>
<style>
   body {
      font-family: Arial, sans-serif;
   }
   .container {
      width: 50%;
      margin: 50px auto;
      text-align: center;
   }
   label {
      margin-right: 10px;
   }
   input {
      padding: 5px;
      margin-right: 10px;
   }
   button {
      padding: 5px 10px;
      cursor: pointer;
   }
   #result {
      margin-top: 20px;
      font-weight: bold;
   }
</style>
</head>
<body>
<div class="container">
   <h2>Time Input Validation</h2>
   <form id="timeForm">
      <label for="timeInput">Enter a time:</label>
      <input type="text" id="timeInput" name="timeInput" placeholder="e.g., 5s or -200ms or 10mS">
      <button type="button" onclick="validateTime()">Check</button>
   </form>
   <p id="result"></p>
</div>
<script>
   function validateTime() {
      const userInput = document.getElementById('timeInput').value.trim();
      // Regular expressions to match valid time inputs
      const validTimeRegex = /^(0|(\+|-)?\d+(\.\d+)?(s|ms))$/i;
      if (validTimeRegex.test(userInput)) {
         document.getElementById('result').innerText = 'Valid time input!';
      } 
      else {
         document.getElementById('result').innerText = 'Invalid time input!';
      }
   }
</script>
</body>
</html>

CSS <time> - Used With transition-duration

When used within transition-duration in CSS, the <time> data type defines a duration for a transition effect, indicating how long the transition will take to finish.

It enables for exact control over the time of CSS transitions and may be defined in milliseconds or seconds.

<html>
<head>
<style>
   button {
      transition-property: background-color, color, transform;
      transition-duration: 3s;
      transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      background-color: #2ecc71;
      color: white;
      border: none;
      padding: 15px 30px;
      font-size: 18px;
      cursor: pointer;
      border-radius: 8px;
      outline: none;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }
   button:hover {
      background-color: #3498db; 
      color: #fff;
      transform: translateY(-3px); 
      box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); 
   }
</style>
</head>
<body>
<button>Hover Over This Button for 3 seconds</button>
</body>
</html>