I want @keyframes to support seconds as indicator for a keyframe

Submitted by Robert van der Elst

I'm just starting with @keyframes for a bit, but with animations, timing is sometimes very precise and critical. From what I see, you can only use 'from' and 'to' or use percentages, so to get some timings right can be pretty hard.

Ideally, I'd like to have the control to precisely add a keyframe via a timestamp in seconds.

Something like this:

@keyframes demo {
  1s {
    color: #f00;
  }
  1.5s {
    color: #0f0;
  }
  1.75s {
    color: #00f;
  }
}

Obviously, the animation-duration property should match the length of the keyframes somehow (either explicitly or implicitly).

Tagged
CSS Animation