Merge pull request #463 from twbs/#390

Fix `@keyframes`

Gruntfile.js

@@ -117,7 +117,6 @@ module.exports = function(grunt) {
       options: {
         banner: '', // set to empty; see bellow
         keepSpecialComments: '*', // set to '*' because we already add the banner in sass
-        noAdvanced: true, // disable advanced optimizations since it causes many issues
         report: 'min'
       },
       ratchet: {
@@ -261,7 +260,7 @@ module.exports = function(grunt) {
   grunt.registerTask('validate-html', ['jekyll', 'validation']);
   grunt.registerTask('build', ['dist']);
   grunt.registerTask('default', ['dist']);
-  grunt.registerTask('test', ['dist', 'jshint', 'jscs', 'validate-html']);
+  grunt.registerTask('test', ['dist', 'csslint', 'jshint', 'jscs', 'validate-html']);
 
   grunt.registerTask('build-ratchicons-data', generateRatchiconsData);
 

docs/assets/css/docs.css

@@ -1362,11 +1362,12 @@ hr {
           transform: translate3d(-20%, 0, 0);
 }
 @-webkit-keyframes fadeOverlay {
-  .platform-ios from {
+  from {
     -webkit-box-shadow: 0 0 10px transparent, -320px 0 0 transparent;
             box-shadow: 0 0 10px transparent, -320px 0 0 transparent;
   }
-  .platform-ios to {
+
+  to {
     -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
             box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
   }

sass/theme-ios.scss

@@ -580,7 +580,9 @@ textarea,
 }
 
 // Overlay animation for the slide transition
-@-webkit-keyframes fadeOverlay {
-  from { @include box-shadow(0 0 10px rgba(0,0,0,0), -320px 0 0 rgba(0,0,0,0)); }
-  to   { @include box-shadow(0 0 10px rgba(0,0,0,.3), -320px 0 0 rgba(0,0,0,.1)); }
+@at-root {
+  @-webkit-keyframes fadeOverlay {
+    from { @include box-shadow(0 0 10px rgba(0,0,0,0), -320px 0 0 rgba(0,0,0,0)); }
+    to   { @include box-shadow(0 0 10px rgba(0,0,0,.3), -320px 0 0 rgba(0,0,0,.1)); }
+  }
 }