Don't add important to keyframes

Author: adamwathan

__tests__/fixtures/tailwind-output-important.css

@@ -14374,45 +14374,45 @@ video {
 
 @keyframes spin {
   from {
-    transform: rotate(0deg) !important;
+    transform: rotate(0deg);
   }
 
   to {
-    transform: rotate(360deg) !important;
+    transform: rotate(360deg);
   }
 }
 
 @keyframes ping {
   0% {
-    transform: scale(1) !important;
-    opacity: 1 !important;
+    transform: scale(1);
+    opacity: 1;
   }
 
   75%, 100% {
-    transform: scale(2) !important;
-    opacity: 0 !important;
+    transform: scale(2);
+    opacity: 0;
   }
 }
 
 @keyframes pulse {
   0%, 100% {
-    opacity: 1 !important;
+    opacity: 1;
   }
 
   50% {
-    opacity: .5 !important;
+    opacity: .5;
   }
 }
 
 @keyframes bounce {
   0%, 100% {
-    transform: translateY(-25%) !important;
-    animation-timing-function: cubic-bezier(0.8,0,1,1) !important;
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
   }
 
   50% {
-    transform: translateY(0) !important;
-    animation-timing-function: cubic-bezier(0,0,0.2,1) !important;
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
   }
 }
 

src/plugins/animation.js

@@ -8,7 +8,7 @@ export default function() {
         return [`@keyframes ${name}`, keyframes]
       })
     )
-    addUtilities(keyframesStyles)
+    addUtilities(keyframesStyles, { respectImportant: false })
 
     const animationConfig = theme('animation')
     const utilities = _.fromPairs(