1

CSSO generating code that IE can't deal with.

My simple @keyframes code:

@keyframes star-pulsing {
  0% {
    transform: scale(1);
    border: 2px solid @brand-primary;
  }
  20%, 40% {
    transform: scale(1.3);
    background-color: #FFFFFF;
    border: 2px solid @brand-primary;
    color: #b24700;
  }
  55% {
    transform: scale(1);
    background-color: #FFFFFF;
    border: 2px solid @brand-primary;
  }
  70% {
    background-color: #FFFFFF;
    border: 2px solid @brand-primary;
  }
  100% {
    color: #ff6600;
    background-color: #b24700;
    border: 2px solid @brand-primary;
  }
}

CSSO is trying to be smart, and making something like this:

@keyframes star-pulsing{
  0%{-webkit-transform:scale(1);transform:scale(1);border:2px solid #f60}
  20%,40%{-webkit-transform:scale(1.3);transform:scale(1.3);background-color:#fff;color:#b24700}
  20%,40%,55%{border:2px solid #f60}
  55%{-webkit-transform:scale(1);transform:scale(1)}
  55%,70%{background-color:#fff}
  70%,100%{border:2px solid #f60}100%{color:#f60;background-color:#b24700}

It seems like IE can't deal with the double frame definition; it's ignoring scaling.

How do I deal with this?

Pikachu
  • 1,973
  • 3
  • 20
  • 27

0 Answers0