CSS use Calc to get seconds based on viewport width

Question

I am trying to find a way if possible to calculate the duration of a CSS Keyframe animation based on viewport. Tried to do something like this:

calc((100vw / 75) * 1s);

but I think I won't be able to get a Result without use of JS, which works fine so far like this:

var animTime = jQuery(window).width() / 75;
jQuery('.animation-container').css('animationDuration', animTime + 's');
jQuery('.animation-container').addClass('anim');

It's mostly a question if any css wizard out there knows of a pure CSS approach for something like this.

Answer 1

A CSS-only solution and chrome-only. Not ready for production use but a good use case for what you want:

@property --w {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}
body {
  --w: 100vw;
  --d: tan(atan2(var(--w), 1px));  /* the value you want*/
}

/* resize the screen and the --d value will get updated */
body:before {
  content: counter(num);
  counter-reset: num var(--d);
  font-size: 30px;
}

More detail: https://dev.to/janeori/css-type-casting-to-numeric-tanatan2-scalars-582j