maqetta/maqetta — Issue #1091: CSS Model mangles animation sequence using keyframes 
Author: billreed63
Created: 2011-10-21 21:13:21+00:00
State: open
Labels: Bug, Priority High

The dojox mobile themes contain animation sequence [keyframes] (https://developer.mozilla.org/en/css/css_animations)

````css
.mblScaleIn.mblIn {
z-index : 0;
-webkit-animation-duration : .5s;
-webkit-animation-name : mblScaleInIn;
-webkit-animation-timing-function : ease-out;
}
.dj_android .mblScaleIn.mblIn {
-webkit-animation-name : mblScaleInInAndroid;
}
@-webkit-keyframes mblScaleInOut {
from { -webkit-transform: scale(1.0); }
to { -webkit-transform: scale(1.0); }
}
@-webkit-keyframes mblScaleInIn {
from {
-webkit-transform: scale(0.0);
opacity: 0;
}
to {
-webkit-transform: scale(1.0);
opacity: 1;
}
}
@-webkit-keyframes mblScaleInInAndroid {
from { -webkit-transform: scale(0.0); }
to { -webkit-transform: scale(1.0); }
}
````

When a css rule is change in the file and the file is save the output css is corrupted.
The output key rule looks something like:

````css
@ -webkit-keyframesmblScaleInOut{from{-webkit-transform:scale(1.0);to {
-webkit-transform : scale(1.0);
}
````

To recreate:
1) checkout the mobileThemeEditor branch
2)Create a new theme, called a1 (clone android theme).
3) Click on the header widget and change the background-color
4) Save the theme
5) close the theme editor
6) reopen your theme, notice that the buttons are the wrong size.

If you now look at the a1.css and search for '@', noticed that the syntax is bad