LearnBoost/stylus — Issue #504: keyframe animation break on comments
Author: 3rd-Eden
Created: 2012-01-08 14:16:52+00:00
State: open

I think I found another issue with keyframes but i'm not sure... I think we would be allowed to put comments
between the keyframe's.

The Stylus

```css
@keyframes hinge {
0%
transform: rotate(0)
transform-origin: top left
animation-timing-function: ease-in-out

20%, 60%
transform: rotate(40deg)
transform-origin: top left
animation-timing-function: ease-in-out

40%
transform: rotate(20deg)
transform-origin: top left
animation-timing-function: ease-in-out

// @TODO the opacity get's transformed to a ms filter as well because we use NIB?
// as < IE 10 doesn't even support animations we should find a work around for this
80%
transform: rotate(20deg) translateY(0)
opacity: 1
transform-origin: top left
animation-timing-function: ease-in-out

100%
transform: translateY(700px)
opacity: 0
```

Actual result:

```
40| transform: rotate(20deg)
41| transform-origin: top left
42| animation-timing-function: ease-in-out
43|
> 44| // @TODO the opacity get's transformed to a ms filter as well because we use NIB?
45| // as < IE 10 doesn't even support animations we should find a work around for this
46| 80%
47| transform: rotate(20deg) translateY(0)

expected "outdent", got "newline"

at Parser.error (/Users/V1/Sites/observer/node_modules/stylus/lib/parser.js:158:11)
at Parser.expect (/Users/V1/Sites/observer/node_modules/stylus/lib/parser.js:186:12)
at Parser.keyframes (/Users/V1/Sites/observer/node_modules/stylus/lib/parser.js:830:12)
at Parser.stmt (/Users/V1/Sites/observer/node_modules/stylus/lib/parser.js:510:21)
at Parser.statement (/Users/V1/Sites/observer/node_modules/stylus/lib/parser.js:439:21)
at Parser.parse (/Users/V1/Sites/observer/node_modules/stylus/lib/parser.js:137:23)
at Evaluator.visitImport (/Users/V1/Sites/observer/node_modules/stylus/lib/visitor/evaluator.js:653:20)
at Evaluator. (/Users/V1/Sites/observer/node_modules/stylus/lib/visitor/index.js:28:39)
at Evaluator.visit (/Users/V1/Sites/observer/node_modules/stylus/lib/visitor/evaluator.js:74:18)
at Evaluator.visitRoot (/Users/V1/Sites/observer/node_modules/stylus/lib/visitor/evaluator.js:503:27)
```

Expected result:

```css
@keyframes hinge{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);transform:rotate(0);transform-origin:top left;-webkit-animation-timing-function:ease-in-out;-moz-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
20%,60%{-webkit-transform:rotate(40deg);-moz-transform:rotate(40deg);transform:rotate(40deg);transform-origin:top left;-webkit-animation-timing-function:ease-in-out;-moz-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
40%{-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);transform:rotate(20deg);transform-origin:top left;-webkit-animation-timing-function:ease-in-out;-moz-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
80%{-webkit-transform:rotate(20deg) translateY(0);-moz-transform:rotate(20deg) translateY(0);transform:rotate(20deg) translateY(0);opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);transform-origin:top left;-webkit-animation-timing-function:ease-in-out;-moz-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
100%{-webkit-transform:translateY(700px);-moz-transform:translateY(700px);transform:translateY(700px);opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0)}
}
```

Work around:

Place the comments above the `@keyframe` instead of between them