0% steps in @keyframe animations incorrectly changed to 0

[matthewrobb]

Taking the following CSS:

@keyframe anim {
    0% { opacity: 0; }
  100% { opacity: 1; }
}

The output will be incorrectly rewritten to:

@keyframe anim {
    0 { opacity: 0; }
 100% { opacity: 1; }
}

This is not functionally equivalent.

[tml]

Would

@keyframe anim{0%{opacity:0}100%{opacity:1}}

be equivalent?

[matthewrobb]

@tml Yeah that would work perfectly.

[brianwozeniak]

Your fix only resolves @Keyframes, however, remember that there are many others such as:

@-moz-keyframes
@-webkit-keyframes
@-o-keyframes

This will work better:

css = css.replaceAll("(@(?:-.+?)?keyframe.*?)0{", "$10%{");

[tml]

👍 Thanks, @Bigwebmaster; I didn't consider vendor-specific extensions.

[a701440]

It is also stripping "deg" unit from "0deg".

/*! Before minification */
@-webkit-keyframes spin {
0% {
-webkit-transform: rotateZ(0deg);
}

100% {
    -webkit-transform: rotateZ(360deg);
}

}

/*! After minification */
@-webkit-keyframes spin{0{-webkit-transform:rotateZ(0)}100%{-webkit-transform:rotateZ(360deg)}}

[leods92]

I have just downgraded to the previous version that didn't have this bug.
Does anyone know when this bug fix will be released? I think it's very important given that people are using animations more often these days.

[kaansoral]

+1 @leods92 - this issue breaks the following css rule at mobile webkit browsers

[sarim]

The pull requests here don't solve the issue. It works if you have 0% { ........ } but fails if there is a comma, Ex:

@-webkit-keyframes circlebounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
}

[ardok]

Does using 0.00% solve the problem?

[und3f1ned]

Solved by using 0.00% instead 0%

[ardok]

@snusmubrik thanks!

[Gennady77]

I can't make sense somebody fix this bug?

[tml]

@Gennady77 This should be fixed if you use master.

[Gennady77]

I use npm chanel and there is latest version and there is the bug.

[tml]

I don't know anything about how npm is choosing to bundle this, maybe you can reach out to them and ask them to join in the conversation here?

[foaly-nr1]

@tml I just built form master, same result.

[smadalin]

you can use "from" - "to" instead of 0%- 100%

[zanedev]

+1 on the from and to for now

[chinshr]

0.00% instead of 0% fixed this problem for me. Thanks!

[AngelTs]

Use 00% instead of 0%

[jochenberger]

Should be fixed in master (see #231)

[josenobile]

I'm affected for the same.
Check https://www.w3.org/TR/css3-animations/#keyframes

Note that the percentage unit specifier must be used on percentage values. Therefore, ‘0’ is an invalid keyframe selector.

[lordrhodos]

same here, just ran into the issue trying to minify the spectre css files which have the following code:

// Animations
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes slide-down {
  0% {
    transform: translateY(-3rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

using yuicompressor 2.4.8

[1337GameDev]

I was able to fix this issue by doing the following:

1. Removed all keyframe platform specific selectors (webkit-/mox-/ie-)
2. Used the following paradigm for degrees and percentages:

@keyframes spin {
  00% {
    transform: rotate(-1deg);
  }
  100.00% {
    transform: rotate(-361deg);
  }
}

.spinner {
  animation: spin 2.00s linear infinite;
}

This prevents 0%/100% from having the "%" removed, as well as the "deg" being removed.
Using the "animation" selector also had "s" removed from seconds, so I had to add a 0 after.

These issues really should be fixed. I shouldn't have to fight with a minifier.

This minifier has also been officially adopted by PHPWebstorm (which I use for work). The minifier was installed using NPM via command-line. NPM's version should be verified to be using the MASTER version so fixes of this nature are included.

[gaeld]

The previously workaround do work, but they are working. Using CSS animations librairies is a nightmare, because you have to rewrite every-rules.
Any news on a fix yet ?