LearnBoost/stylus — Issue #503: keyframes animation breaks on comma separate percentages
Author: 3rd-Eden
Created: 2012-01-08 13:13:40+00:00
State: open

Keyframes animation breaks on comma separate percentages

Input:

```css
@keyframes tada
0%
transform: scale(1)
10%, 20%
transform: scale(.9) rotate(-3deg)
```

Expected:

```css
@-webkit-keyframes tada {
0% {-webkit-transform: scale(1);}
10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
}
```

Actual result:

```
7|
8| @keyframes tada
9| 0%
10| transform: scale(1)
> 11| 10%, 20%
12| transform: scale(.9) rotate(-3deg)
13|

expected "indent", got ","

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.block (/Users/V1/Sites/observer/node_modules/stylus/lib/parser.js:577:12)
at Parser.keyframes (/Users/V1/Sites/observer/node_modules/stylus/lib/parser.js:798:24)
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:649: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:73:18)
```

They only work around for this is to specify all animations on their own line, which makes the animations really hard to maintain and introduces a lot of extra pointless work.