CSS Data Type - <time-percentage>

A value that may be either a <time> or a <percentage> is indicated by the CSS data type <time-percentage>.

Syntax

<time-percentage> = <time> | <percentage>

CSS <time> - Valid and invalid percentage

Following is the list of valid percentage:

Percentage	Description
65%
+45%	Plus sign.
-30%	Not all attributes that accept percentages accept negative percentages.

Following is the list of invalid percentages:

Percentage	Description
20 %	There cannot be any space between the % sign and the number.

CSS <time> - Valid and invalid times

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 -

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-percentage> - Percentage used in calc()

The following example demonstrates the use of <percentage> data type used in a calc() function, where the width of the element is calculated.

<html>
<head>
<style>
   .percal {
      position: absolute;
      width: calc(100% - 140px);
      border: solid black 2px;
      background-color: teal;
      color: white;
      padding: 10px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="percal">
      <h1><percentage> datatype used in calc()</h1>
   </div>
</body>
</html>

CSS <time-percentage> - Time used in animation

The following example demonstrates the use of <time> data type used in the animation, where the duration of the animation is specified in time unit, i.e., 10s.

<html>
<head>
<style>
   .animated {
      width: 100px;
      height: 50px;
      background-color: purple;
      background-repeat: no-repeat;
      background-position: left top;
      padding-top: 95px;
      margin-bottom: 60px;
      -webkit-animation-duration: 10s;
      animation-duration: 10s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
   }
   
   @-webkit-keyframes pulse {
      0% { -webkit-transform: scale(1.5); }
      50% { -webkit-transform: scale(3.1); }
      100% { -webkit-transform: scale(2); }
   }
   
   @keyframes pulse {
      0% { transform: scale(1.5); }
      50% { transform: scale(3.1); }
      100% { transform: scale(2); }
   }
   
   .pulse {
      -webkit-animation-name: pulse;
      animation-name: pulse;
   }
</style>
</head>
<body>
   <div class = "animated pulse"></div>
</body>
</html>