Add keyframes as utilities instead of base

Author: adamwathan

__tests__/fixtures/tailwind-output-ie11.css

@@ -577,50 +577,6 @@ video {
   height: auto;
 }
 
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes ping {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  75%, 100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: .5;
-  }
-}
-
-@keyframes bounce {
-  0%, 100% {
-    transform: translateY(-25%);
-    animation-timing-function: cubic-bezier(0.8,0,1,1);
-  }
-
-  50% {
-    transform: translateY(0);
-    animation-timing-function: cubic-bezier(0,0,0.2,1);
-  }
-}
-
 .container {
   width: 100%;
 }
@@ -10994,6 +10950,50 @@ video {
   transition-delay: 1000ms;
 }
 
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ping {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: .5;
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+
 .animate-none {
   animation: none;
 }

__tests__/fixtures/tailwind-output-important.css

@@ -577,50 +577,6 @@ video {
   height: auto;
 }
 
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes ping {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  75%, 100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: .5;
-  }
-}
-
-@keyframes bounce {
-  0%, 100% {
-    transform: translateY(-25%);
-    animation-timing-function: cubic-bezier(0.8,0,1,1);
-  }
-
-  50% {
-    transform: translateY(0);
-    animation-timing-function: cubic-bezier(0,0,0.2,1);
-  }
-}
-
 .container {
   width: 100%;
 }
@@ -14416,6 +14372,50 @@ video {
   transition-delay: 1000ms !important;
 }
 
+@keyframes spin {
+  from {
+    transform: rotate(0deg) !important;
+  }
+
+  to {
+    transform: rotate(360deg) !important;
+  }
+}
+
+@keyframes ping {
+  0% {
+    transform: scale(1) !important;
+    opacity: 1 !important;
+  }
+
+  75%, 100% {
+    transform: scale(2) !important;
+    opacity: 0 !important;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1 !important;
+  }
+
+  50% {
+    opacity: .5 !important;
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%) !important;
+    animation-timing-function: cubic-bezier(0.8,0,1,1) !important;
+  }
+
+  50% {
+    transform: translateY(0) !important;
+    animation-timing-function: cubic-bezier(0,0,0.2,1) !important;
+  }
+}
+
 .animate-none {
   animation: none !important;
 }

__tests__/fixtures/tailwind-output-no-color-opacity.css

@@ -577,50 +577,6 @@ video {
   height: auto;
 }
 
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes ping {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  75%, 100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: .5;
-  }
-}
-
-@keyframes bounce {
-  0%, 100% {
-    transform: translateY(-25%);
-    animation-timing-function: cubic-bezier(0.8,0,1,1);
-  }
-
-  50% {
-    transform: translateY(0);
-    animation-timing-function: cubic-bezier(0,0,0.2,1);
-  }
-}
-
 .container {
   width: 100%;
 }
@@ -11968,6 +11924,50 @@ video {
   transition-delay: 1000ms;
 }
 
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ping {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: .5;
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+
 .animate-none {
   animation: none;
 }