Using clamp() to generate a dynamic duration declaration relative to the users viewport width?

Question

Is it possible for a css animation-duration declaration to have a dynamic duration relative to the users viewport? I want the animation to run for longer on larger screens and more quickly on smaller devices.

.box {
  background-color: blue;
  display: block;
  width: 300px;
  height: 300px;
  animation: rotate linear infinite;
  animation-duration : clamp(5s, 20vw, 10s);
  @keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
}

I know using @media queries may suffice as a solution; I'm just curious as to why using clamp returns an "Invalid property value" error in my Chrome inspector.

Documentation I've found for the clamp function suggests that a <time> value can be returned.