animation-delay when changed during an animation does not change delay

Won’t fix Issue #15812355


Jonathan H.
Feb 5, 2018
This issue is public.
Found in
  • Microsoft Edge
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

I start running a fade-in-animation with a slow delay 5000ms as below:

      @keyframes keyFrameFadeInOpacity {
        0% {
          opacity: 0;
        100% {
          opacity: var(--paper-tooltip-opacity, 0.9);

      .fade-in-animation {
        opacity: 0;
        animation-delay: 500ms;
        animation-name: keyFrameFadeInOpacity;
        animation-iteration-count: 1;
        animation-timing-function: ease-in;
        animation-duration: 5000ms;
        animation-fill-mode: forwards;

I apply this to a element such as a tooltip. As it starts to display slowly (5 seconds!) I then change my mind by applying another class below.

      .cancel-animation {
        animation-delay: -30s;

This on Chrome and Firefox immediately jumps to the end of the animation and completes. On Edge this request is ignored.

The negative delay is allowed as per MDN


0 attachments

    Comments and activity

    • Sorry the keyframes should of read

            @keyframes keyFrameFadeInOpacity {
              0% {
                opacity: 0;
              100% {
                opacity:  0.9;
    • Microsoft Edge Team

      Changed Assigned To to “Steven K.”

      Changed Status to “Won’t fix”

    • Thank you for the report! There was a specification change that happened after we’ve shipped original implementation:

      Per an

      iteration of the spec

      : “The values used for the keyframes and animation
      properties are snapshotted at the time the animation starts. Changing them
      during the execution of the animation has no effect.”


      Per the

      current editor’s

      : “Changes to the values of animation properties while the animation
      is running apply as if the animation had those values from when it began.”

      I’ve resolved your report against the work item we use to track fixing this and we hope to see this resolved in one of the future releases.

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

    Sign in