Bug with CSS Animations

[Chaptykov]

It copies this issue, but bug wasn't fixed.
I use latest versions of csso and grunt-csso.

Before:

@keyframes fadein {
    0% {
        opacity: 0;
        transform: scale(.95);
        }
    30% {
        opacity: 1;
        transform: scale(1);
        }
    70% {
        opacity: 1;
        transform: scale(1);
        }
    100% {
        opacity: 1;
        transform: scale(1);
        opacity: 0;
        }
    }

After:

@keyframes fadein {
    0% {
        opacity: 0;
        transform: scale(.95)
    }

    30%,70% {
        opacity: 1
    }

    30%,70%,100% {
        transform: scale(1)
    }

    100% {
        opacity: 0
    }
}

[tomByrer]

Good catch!
I'm sure that 70% { transform: scale(1) } is not needed since the other steps surrounding it have the same value, & any to: | 100% keyframes that are 100%|1.0 are not needed either. So the most reduced CSS for that block would be:

30% { /* 70% & 100% are assumed */
    transform: scale(1)
}

[Sawtaytoes]

I'm having this issue myself (surprising someone just posted about it). It's breaking one of my animations completely. Is there a temp fix to preserve this section?

tr;dl
Pre-optimization works for Chrome and Firefox.
After optimization, Firefox works, Chrome does not.

Here's an example of my problem:

@keyframes grow-pick-go-borders--third {
  0%, 100% {
    margin-top: -2rem;
    margin-left: -2rem;
    top: 50%;
    left: 50%;
    width: 4rem;
    height: 4rem;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  70% {
    margin-top: -1.84375rem;
    margin-left: -1.84375rem;
    top: 50%;
    left: 50%;
    width: 3.6875rem;
    height: 3.6875rem;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

This is optimizing as:

@keyframes grow-pick-go-borders--third { 
    0%,
    100% {
        margin-top: -2rem;
        margin-left: -2rem;
        width: 4rem;
        height: 4rem;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    0%,
    100%,
    70% {
        top: 50%;
        left: 50%;
    }
    70% {
        margin-top: -1.84375rem;
        margin-left: -1.84375rem;
        width: 3.6875rem;
        height: 3.6875rem;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

I think this has issues w/ the -webkit vendor prefix @-webkit-keyframes grow-pick-go-borders--third which is required for Chrome to work. It's outputting the same as the unprefixed version, but I don't think Chrome can handle that syntax as Firefox is working just fine w/ the unprefixed optimized version.

[artyfarty]

The bug still persists.

Seems that the project is support is fading. Is there at least any workaround?

[Sawtaytoes]

I went back to look at the project, the work around for me was to comment out my use of CSSO in grunt.

There's probably something in this project's code we could mess w/. This is speculation, but we might be able to put a conditional around where it tries to optimize @Keyframes.

[tomByrer]

Could someone atleast post some tests here please?

[Sawtaytoes]

Do I go to the atkeywords place and add it by copy/pasting @font-face or is there some special syntax for this?

[tomByrer]

I would think it would be better to create a /test-keyframes folder; they can always be copied into /test-atkeywords later.

[Sawtaytoes]

I've never done unit tests like these before. So I just put them in the tests folder by copy/pasting some others, and we're good to go?

[tomByrer]

I usually copy-paste-edit-PR myself other tests for other repos. But I've never used this testing software; it seems foreign to me.

[lahmatiy]

Looks like Chrome had bugs with @keyframes selectors in the past, since examples are work fine now. Anybody have an information about problem?