transitionDuration.aspx font size:
View Sample
<html>
<head>
<title>Abakada CSS Demo: Setting transitionDuration in Code</title>
<link rel="stylesheet" href="/shared/netdemos.css">

<style>
#sphere {
   margin: 10; padding: 10;
   transition: rotate;
}
table.demo {
   width: 65%; height: 360; 
   box-shadow: -8px 8px 8px gray;
}
select {
   width: 200px; padding: 3px; font-size: 12pt;
   background-color: wheat;
}
</style>

<script language="JavaScript">
<!--
function change ( ) {
   sphere.style.rotate = "360deg";
   sphere.style.transitionDuration = selector.value;
   setTimeout( ( ) => {
      sphere.style.rotate = "0deg";
   }, 2000 );
}
//-->
</script>
</head>

<body>
<div class="header"><h2>Abakada CSS Demo: Setting <b>transitionDuration</b> in Code</h2></div>
<hr size=1 width=92%>

<center>

<p id="msg">This example illustrates how the <b>transitionDuration</b> property can be set<br>
to dynamically apply duration values to a transition, in response to user action. </p>

<table class="demo">
<tr align="center">
<td width="50%" style="background: linear-gradient(skyblue, palegoldenrod, skyblue)">
   <img id="sphere" src="/shared/images/earth.png" width=360></td>
</td>
<td width="50%" style="background: linear-gradient(#e66465, #9198e5);">
   <select id="selector" size=11 onchange="change ( )">
      <option selected>0s</option>
      <option>0.25s</option>
      <option>0.5s</option>
      <option>1s</option>
      <option>1.5s</option>
      <option>3s</option>
      <option>250ms</option>
      <option>500ms</option>
      <option>1000ms</option>
      <option>1500ms</option>
      <option>3000ms</option>
   </select>
</td>
</tr>
</table>

<p class="small"><b>Please wait for the sphere to revert to its inital state before applying another choice.</b></p>

</center>

<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->

</body>
</html>