Open In App

CSS Value Time

Improve
Improve
Like Article
Like
Save
Share
Report

The CSS Value Time, <time>,  represents a time value expressed in seconds or milliseconds. It is used in animation, transition, and related properties.

Syntax:

<number>units

Property Values:

  • <number>: It represents the amount of time or duration we want. It can be preceded by a single + or sign.
  • units: It is the representation. It can be s, ms.

Example 1:




<!DOCTYPE html>
<html>
<head>
<style
div {
  width: 100px;
  height: 100px;
  background: green;
  position: relative;
  animation: mymove infinite;
  animation-duration: 3s;/*CSS | Time */
}
  
@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}
</style>
</head>
<body>
<center><div></div></center>
</body>
</html>


Output:

Example 2




<!DOCTYPE html>
<html>
<head>
<style
div {
  width: 100px;
  height: 20px;
  background: green;
  transition: width 2s, height 4s;/*CSS | Time*/
}
  
div:hover {
  width: 300px;
  height: 300px;
}
</style>
</head>
<body>
<div><p style="color:white">GeeksforGeeks</p></div>
</body>
</html>


Output:



Last Updated : 10 Sep, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads