@@ -191,7 +191,6 @@ body { -webkit-transform: translateZ(0); } /* iOS optimization */
191191}
192192
193193@-moz-keyframes swing {
194- 20% , 40% , 60% , 80% , 100% { -moz-transform-origin : top center; }
195194 20% { -moz-transform : rotate (15deg ); }
196195 40% { -moz-transform : rotate (-10deg ); }
197196 60% { -moz-transform : rotate (5deg ); }
@@ -200,7 +199,6 @@ body { -webkit-transform: translateZ(0); } /* iOS optimization */
200199}
201200
202201@-ms-keyframes swing {
203- 20% , 40% , 60% , 80% , 100% { -ms-transform-origin : top center; }
204202 20% { -ms-transform : rotate (15deg ); }
205203 40% { -ms-transform : rotate (-10deg ); }
206204 60% { -ms-transform : rotate (5deg ); }
@@ -209,7 +207,6 @@ body { -webkit-transform: translateZ(0); } /* iOS optimization */
209207}
210208
211209@-o-keyframes swing {
212- 20% , 40% , 60% , 80% , 100% { -o-transform-origin : top center; }
213210 20% { -o-transform : rotate (15deg ); }
214211 40% { -o-transform : rotate (-10deg ); }
215212 60% { -o-transform : rotate (5deg ); }
@@ -218,7 +215,6 @@ body { -webkit-transform: translateZ(0); } /* iOS optimization */
218215}
219216
220217@keyframes swing {
221- 20% , 40% , 60% , 80% , 100% { transform-origin : top center; }
222218 20% { transform : rotate (15deg ); }
223219 40% { transform : rotate (-10deg ); }
224220 60% { transform : rotate (5deg ); }
@@ -227,6 +223,11 @@ body { -webkit-transform: translateZ(0); } /* iOS optimization */
227223}
228224
229225.swing {
226+ -webkit-transform-origin : top center;
227+ -moz-transform-origin : top center;
228+ -ms-transform-origin : top center;
229+ -o-transform-origin : top center;
230+ transform-origin : top center;
230231 -webkit-animation-name : swing;
231232 -moz-animation-name : swing;
232233 -ms-animation-name : swing;
@@ -3189,47 +3190,42 @@ body { -webkit-transform: translateZ(0); } /* iOS optimization */
31893190 animation-name : rotateOutDownRight;
31903191}
31913192@-webkit-keyframes hinge {
3192- 0% , 20% , 40% , 60% , 80% { -webkit-transform-origin : top left; -webkit-animation-timing-function : ease-in-out; }
3193- 0% { -webkit-transform : rotate (0 ); }
3194- 20% , 60% { -webkit-transform : rotate (80deg ); }
3195- 40% { -webkit-transform : rotate (60deg ); }
3196- 80% { -webkit-transform : rotate (60deg ) translateY (0 ); opacity : 1 ; }
3193+ 0% { -webkit-transform : rotate (0 ); -webkit-transform-origin : top left; -webkit-animation-timing-function : ease-in-out; }
3194+ 20% , 60% { -webkit-transform : rotate (80deg ); -webkit-transform-origin : top left; -webkit-animation-timing-function : ease-in-out; }
3195+ 40% { -webkit-transform : rotate (60deg ); -webkit-transform-origin : top left; -webkit-animation-timing-function : ease-in-out; }
3196+ 80% { -webkit-transform : rotate (60deg ) translateY (0 ); opacity : 1 ; -webkit-transform-origin : top left; -webkit-animation-timing-function : ease-in-out; }
31973197 100% { -webkit-transform : translateY (700px ); opacity : 0 ; }
31983198}
31993199
32003200@-moz-keyframes hinge {
3201- 0% , 20% , 40% , 60% , 80% { -moz-transform-origin : top left; -moz-animation-timing-function : ease-in-out; }
3202- 0% { -moz-transform : rotate (0 ); }
3203- 20% , 60% { -moz-transform : rotate (80deg ); }
3204- 40% { -moz-transform : rotate (60deg ); }
3205- 80% { -moz-transform : rotate (60deg ) translateY (0 ); opacity : 1 ; }
3201+ 0% { -moz-transform : rotate (0 ); -moz-transform-origin : top left; -moz-animation-timing-function : ease-in-out; }
3202+ 20% , 60% { -moz-transform : rotate (80deg ); -moz-transform-origin : top left; -moz-animation-timing-function : ease-in-out; }
3203+ 40% { -moz-transform : rotate (60deg ); -moz-transform-origin : top left; -moz-animation-timing-function : ease-in-out; }
3204+ 80% { -moz-transform : rotate (60deg ) translateY (0 ); opacity : 1 ; -moz-transform-origin : top left; -moz-animation-timing-function : ease-in-out; }
32063205 100% { -moz-transform : translateY (700px ); opacity : 0 ; }
32073206}
32083207
32093208@-ms-keyframes hinge {
3210- 0% , 20% , 40% , 60% , 80% { -ms-transform-origin : top left; -ms-animation-timing-function : ease-in-out; }
3211- 0% { -ms-transform : rotate (0 ); }
3212- 20% , 60% { -ms-transform : rotate (80deg ); }
3213- 40% { -ms-transform : rotate (60deg ); }
3214- 80% { -ms-transform : rotate (60deg ) translateY (0 ); opacity : 1 ; }
3209+ 0% { -ms-transform : rotate (0 ); -ms-transform-origin : top left; -ms-animation-timing-function : ease-in-out; }
3210+ 20% , 60% { -ms-transform : rotate (80deg ); -ms-transform-origin : top left; -ms-animation-timing-function : ease-in-out; }
3211+ 40% { -ms-transform : rotate (60deg ); -ms-transform-origin : top left; -ms-animation-timing-function : ease-in-out; }
3212+ 80% { -ms-transform : rotate (60deg ) translateY (0 ); opacity : 1 ; -ms-transform-origin : top left; -ms-animation-timing-function : ease-in-out; }
32153213 100% { -ms-transform : translateY (700px ); opacity : 0 ; }
32163214}
32173215
32183216@-o-keyframes hinge {
3219- 0% , 20% , 40% , 60% , 80% { -o-transform-origin : top left; -o-animation-timing-function : ease-in-out; }
3220- 0% { -o-transform : rotate (0 ); }
3221- 20% , 60% { -o-transform : rotate (80deg ); }
3222- 40% { -o-transform : rotate (60deg ); }
3223- 80% { -o-transform : rotate (60deg ) translateY (0 ); opacity : 1 ; }
3217+ 0% { -o-transform : rotate (0 ); -o-transform-origin : top left; -o-animation-timing-function : ease-in-out; }
3218+ 20% , 60% { -o-transform : rotate (80deg ); -o-transform-origin : top left; -o-animation-timing-function : ease-in-out; }
3219+ 40% { -o-transform : rotate (60deg ); -o-transform-origin : top left; -o-animation-timing-function : ease-in-out; }
3220+ 80% { -o-transform : rotate (60deg ) translateY (0 ); opacity : 1 ; -o-transform-origin : top left; -o-animation-timing-function : ease-in-out; }
32243221 100% { -o-transform : translateY (700px ); opacity : 0 ; }
32253222}
32263223
32273224@keyframes hinge {
3228- 0% , 20% , 40% , 60% , 80% { transform-origin : top left; animation-timing-function : ease-in-out; }
3229- 0% { transform : rotate (0 ); }
3230- 20% , 60% { transform : rotate (80deg ); }
3231- 40% { transform : rotate (60deg ); }
3232- 80% { transform : rotate (60deg ) translateY (0 ); opacity : 1 ; }
3225+ 0% { transform : rotate (0 ); transform-origin : top left; animation-timing-function : ease-in-out; }
3226+ 20% , 60% { transform : rotate (80deg ); transform-origin : top left; animation-timing-function : ease-in-out; }
3227+ 40% { transform : rotate (60deg ); transform-origin : top left; animation-timing-function : ease-in-out; }
3228+ 80% { transform : rotate (60deg ) translateY (0 ); opacity : 1 ; transform-origin : top left; animation-timing-function : ease-in-out; }
32333229 100% { transform : translateY (700px ); opacity : 0 ; }
32343230}
32353231
0 commit comments