[Webkit-unassigned] [Bug 210526] New: WebAnimations API doesn't properly apply keyframe easings to transforms

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=210526

            Bug ID: 210526
           Summary: WebAnimations API doesn't properly apply keyframe
                    easings to transforms
           Product: WebKit
           Version: Safari 13
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Animations
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: alanorozco at google.com
                CC: dino at apple.com

Created attachment 396484

  --> https://bugs.webkit.org/attachment.cgi?id=396484&action=review

Left box is animated with `top`. Right box is animated using `transform`. Both have the same keyframe easings.

Overview:

Animation effect definitions may include easing properties in each keyframe, like so:

  element.animate(
    [
      {
        top: "0px",
        easing: "step-start"
      },
      {
        top: "100px",
        easing: "step-start"
      },
      {
        top: "0px",
      }
    ],
    1000
  );

These should define the timing of interpolations between frames, but the
property is ignored when the keyframes include transforms.

Steps to reproduce:

Define an animation effect using a) transforms and b) easings per-keyframe.
An example is hosted here: https://webkit-animation-easing.glitch.me/easing.html

  element.animate(
    [
      {
        transform: "translateY(0px)",
        easing: "step-start"
      },
      {
        transform: "translateY(100px)",
        easing: "step-start"
      },
      {
        transform: "translateY(0px)",
      }
    ],
    1000
  );

Actual Results:

See in example URL that keyframe easings are not respected for the element
whose `transform` is animated.

Expected results:

Animation effect should respect easings, like it does for the element whose
`top` is animated.

Platform:

Safari Version 13.1 (15609.1.20.111.8)
macOS 10.15.4 (19E266)

Additional Information:

Attached video showing actual result.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20200415/b0e01f19/attachment-0001.htm>