Bug: Keyframe optimization blocks 0% keyframe, prevents animation from running

[restlessdesign]

Discovered this while using the Animate.css library. Only using the -webkit- prefix to keep this example short:

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}

Gives the following output (expanded for readability):

@-webkit-keyframes rotateInUpRight{
    0% {
        -webkit-transform:rotate(-90deg);
        opacity:0
    }

    0%,100% {
        -webkit-transform-origin:right bottom;
    }

    100%{
        -webkit-transform:rotate(0);
        opacity:1
    }
}

The issue is caused by the 0%,100% keyframe appearing after the 0% keyframe declaration. Altered, this code will animate as expected:

@-webkit-keyframes rotateInUpRight{
    0%,100% {
        -webkit-transform-origin:right bottom;
    }

    0% {
        -webkit-transform:rotate(-90deg);
        opacity:0
    }

    100%{
        -webkit-transform:rotate(0);
        opacity:1
    }
}

[afelix]

Thank you. Will fix it ASAP.

[sokra]

I think this is a similar issue:

div {
    height: -webkit-calc(100% - 30px);
    height: -moz-calc(100% - 30px);
    height: -ms-calc(100% - 30px);
    height: -o-calc(100% - 30px);
    height: calc(100% - 30px);
}

minimized:

div{height:calc(100% - 30px)}

[afelix]

2sokra: nope, it is another bug. Thanks, almost fixed that.
For history reasons let it be here: #81

[tomByrer]

Has this bug been fixed, & not closed yet? It is a breaking bug for CSS animations.
TIA