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?