• The following bit of CSS breaks the plugin. For whatever reason, if I insert a dummy class in between the animations it works fine…

    If you delete fadein animation blocks, then fadeout will work. It also works if you delete fadeout and leave fadein. If you have both though (without the .vex-fake separator) then no CSS renders at all and it breaks entirely:

    @keyframes vex-fadein {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    
    @-webkit-keyframes vex-fadein {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    
    @-moz-keyframes vex-fadein {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    
    @-ms-keyframes vex-fadein {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    
    @-o-keyframes vex-fadein {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    
    .vex-fake {
      /* vex breaks the CSS minify plugin for some reason
       * when both of these animation rules above and below
       * are present. For some reason, breaking them apart
       * with this fake css block fixes the issue... */
      display: block;
    }
    
    @keyframes vex-fadeout {
      0% { opacity: 1; }
      100% { opacity: 0; }
    }
    
    @-webkit-keyframes vex-fadeout {
      0% { opacity: 1; }
      100% { opacity: 0; }
    }
    
    @-moz-keyframes vex-fadeout {
      0% { opacity: 1; }
      100% { opacity: 0; }
    }
    
    @-ms-keyframes vex-fadeout {
      0% { opacity: 1; }
      100% { opacity: 0; }
    }
    
    @-o-keyframes vex-fadeout {
      0% { opacity: 1; }
      100% { opacity: 0; }
    }

    https://wordpress.org/plugins/simple-minify/

Viewing 1 replies (of 1 total)
  • Thread Starter zesty1

    (@zesty1)

    It’s because it’s adding quotes around the animation name… I have no idea why it’s doing this, but that isnt valid CSS

Viewing 1 replies (of 1 total)
  • The topic ‘Keyframes break the plugin’ is closed to new replies.