Looping CSS Animation Origin Bug

Fixed Issue #9299804


Jim H.
Oct 11, 2016
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Found in build #
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

Steps to Reproduce

  1. Have a pseudo-element (such as :before) with an infinitely looping CSS animation that uses scale() in combination with translate() transformation.


(in this demo, the animation is triggered on hover of the parent element)

Expected Behavior

In the demo example, the pseudo-element should stay in place and only the scale() transformation should be animated.

Actual Behavior

After the first cycle of the animation finishes and it begins the loop, the psuedo-element jumps to an incorrect position. It behaves as if the transformation origin changed to a negative value in both axises. The actual translate() transformation is not maintained.


  • If the animation does not loop, this issue cannot be reproduced.
  • If the animation is applied without hover state, the issue still exists.
  • If the animation uses different keyframes, the issue still exists.


0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Brad E.”

      Changed Assigned To to “Rick J.”

    • terrible bug

    • Microsoft Edge Team

      Changed Status to “Fixed”

    • Thank you for reporting this issue. Should be fixed in rs2_release.

    You need to sign in to your Microsoft account to add a comment.

    Sign in