visionmedia/nib — Issue #63: @keyframes generates invalid vendor prefix combinations
Author: maerten
Created: 2012-01-26 14:45:51+00:00
State: open

@import 'nib'
@keyframes fadeinout
0%
opacity 1
50%
opacity 0
100%
opacity 1

results in

@-moz-keyframes fadeinout{0%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
50%{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0)}
100%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
}@-webkit-keyframes fadeinout{0%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
50%{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0)}
100%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
}@-o-keyframes fadeinout{0%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
50%{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0)}
100%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
}@-ms-keyframes fadeinout{0%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
50%{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0)}
100%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
}@keyframes fadeinout{0%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
50%{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0)}
100%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
}

The filter:DXImageTransform is for IE6(?) compatibility, but even if IE6 would support the @-ms-keyframes property, it's a waste of space to put the IE specific prefixes within Webkit/Mozilla/Opera prefixes.

Same things happens with CSS transforms:

@import 'nib'
@keyframes fadeinout
0%
transform: translateX(10px)

Resulting in:

@-moz-keyframes fadeinout{0%{-webkit-transform:translateX(10px);-moz-transform:translateX(10px);transform:translateX(10px)}
}@-webkit-keyframes fadeinout{0%{-webkit-transform:translateX(10px);-moz-transform:translateX(10px);transform:translateX(10px)}
}@-o-keyframes fadeinout{0%{-webkit-transform:translateX(10px);-moz-transform:translateX(10px);transform:translateX(10px)}
}@-ms-keyframes fadeinout{0%{-webkit-transform:translateX(10px);-moz-transform:translateX(10px);transform:translateX(10px)}
}@keyframes fadeinout{0%{-webkit-transform:translateX(10px);-moz-transform:translateX(10px);transform:translateX(10px)}
}

-moz-transforms inside @-webkit-keyframes, etc

Using node v0.6.8, stylus v0.22.6.