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
Share your thoughts in the comments
Please Login to comment...