1320740 - Unclear how animation-timing-function interacts with keyframes

Status: RESOLVED FIXED

(Developer Documentation Graveyard :: General, defect, P5)

Description

[Markus Stange [:mstange]]

:: Developer Documentation Request

      Request Type: Correction
     Gecko Version: unspecified
 Technical Contact: 

:: Details

> For keyframed animations, the timing function applies between keyframes rather
> than over the entire animation. In other words, the timing function is applied
> at the start of the keyframe and at the end of the keyframe.
> 
> An animation timing function defined within a keyframe block applies to that
> keyframe; otherwise. If no timing function is specified for the keyframe, the
> timing function specified for the overall animation is used.

The usage of the word "keyframe" in these two paragraphs is very confusing to me. I thought a "keyframe" was a specific point in time. A point does not have a start or an end.
A timing function applies to the space *between* two keyframes. Right?
So which piece of the animation is controlled by the animation-timing function property? The piece before the keyframe that it is specified on, or the piece after?

Comment 1

[Jet Villegas (inactive)]

Brian: do you have a suggestion for improving the docs noted here?
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function

Comment 2

[Brian Birtles (:birtles)]

To answer Markus' question it is the piece *after* the keyframe. As a result, specifying an `animation-timing-function` on the final keyframe is meaningless. Let me see if I can wordsmith something for the MDN page.

Comment 3

[Brian Birtles (:birtles)]

I made some edits to the MDN page:

  https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function$compare?locale=en-US&to=1318999&from=1291019

Feel free to re-open this or update those edits if it's still not clear.