Feature request: Add ability to change speed of animation in CSS3

[Aleksandra0056]

There should be a property that changes animation speed, I don't think “animation-duration”. I want it because it will be useful here: black7375/Firefox-UI-Fix#551

Proposed name for new property: animation-speed

Old issue link: whatwg/html#8656

Specification link: https://w3c.github.io/csswg-drafts/css-animations/#animation

[Loirooriol]

I'm not even sure what values this would accept. If you are animating margin-left, the speed would be like calc(1px / 1s)? And for opacity, calc(1 / 1s)? And what's the speed if you are interpolating discretely between width: min-content to width: max-content?

[Aleksandra0056]

And I thought that “animation-speed” would be a new property because it is difficult to change speed of “animation” property in pure CSS. Click to first link which I posted and user named black7375 explains it.

[cdoublev]

I am not sure to understand your use case from reading the first link, but you may be interested by Animation.playbackRate.

#980 is about adding the corresponding CSS property in CSS Animation 2.

And what's the speed if you are interpolating discretely between width: min-content to width: max-content?

It could default to 1.

[Aleksandra0056]

I don't think this: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration but similar thing.

[cdoublev]

Hmm, sorry, I did not understand. You want animation-duration to depend on the animated text length. So a theoretical animation-speed would define a dynamic value for it.

But speed is coupled to <length> (distance) whereas animation can animate an integer, an angle, a resolution, etc... So you would always compute animation-speed from the block width of the animated element, I guess, which feels weird when animating properties that do not represent a distance, eg. opacity or color.

.animated {
  animation-name: animateWithSpeed;
  animation-speed: calc(1px / 1ms);
}
@keyframes animateWithSpeed {
  to {
    opacity: 0;
    color: purple;
    transform: translateX(100%);
  }
}

[Aleksandra0056]

What you thought with these five words “So a theoretical animation-speed”?

[Aleksandra0056]

I don't think “Animation.playbackRate”, nor “animation-duration”, but new property called “animation-speed” which would calculate the speed of animation of in example text, or image. I will show an example moving text animation for text written in HTML document with attached GIF (And speed for this animation should be controlled with that new property):

[Aleksandra0056]

Sorry for German language GIF, but I didn't find a better GIF.

[Aleksandra0056]

And if you look at the GIF, the moving text have speed, and the speed should be controlled with the proposed “animation-speed” CSS3 property.

[Aleksandra0056]

The “animation-duration” property controls animation duration (Which work similar), but not speed and the “Animation.playbackRate” controls animation playback rate, not speed.

[Aleksandra0056]

And finally the proposed “animation-speed” property would truly control speed.

[Loirooriol]

You don't define "speed" in general. I don't think this concept makes sense for most properties. And for the ones that would make sense, it would have different dimensions, so it's not clear how you would specify it.

[Aleksandra0056]

Just give me a moment I will edit the GIF for better understanding.

[Aleksandra0056]

Slower:

Faster: