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: