Repository: tailwindlabs/tailwindcss
Pull request #2114 (2020-08-03 18:27:36)

Remove redundant animation states
From https://www.w3.org/TR/css-animations-1/#keyframes:

> If a `0%` or from keyframe is not specified, then the user agent constructs a `0%` keyframe using the computed values of the properties being animated. If a `100%` or to keyframe is not specified, then the user agent constructs a `100%` keyframe using the computed values of the properties being animated.

Which means lots of animation states can easily be removed.

In the second commit `translateY(0)` is simplified to `none`


Patch:
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index cba3864e..398b26f8 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -631,15 +631,12 @@ module.exports = {
     },
     keyframes: {
       spin: {
-        from: { transform: 'rotate(0deg)' },
         to: { transform: 'rotate(360deg)' },
       },
       ping: {
-        '0%': { transform: 'scale(1)', opacity: '1' },
         '75%, 100%': { transform: 'scale(2)', opacity: '0' },
       },
       pulse: {
-        '0%, 100%': { opacity: '1' },
         '50%': { opacity: '.5' },
       },
       bounce: {
@@ -648,7 +645,7 @@ module.exports = {
           animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
         },
         '50%': {
-          transform: 'translateY(0)',
+          transform: 'none',
           animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
         },
       },


Test patch:
diff --git a/__tests__/fixtures/tailwind-output-ie11.css b/__tests__/fixtures/tailwind-output-ie11.css
index 6690bfbc..82f67cf2 100644
--- a/__tests__/fixtures/tailwind-output-ie11.css
+++ b/__tests__/fixtures/tailwind-output-ie11.css
@@ -10951,21 +10951,12 @@ video {
 }
 
 @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;
@@ -10973,10 +10964,6 @@ video {
 }
 
 @keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-
   50% {
     opacity: .5;
   }
@@ -10989,7 +10976,7 @@ video {
   }
 
   50% {
-    transform: translateY(0);
+    transform: none;
     animation-timing-function: cubic-bezier(0,0,0.2,1);
   }
 }
diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index 96dd0ef5..213ed145 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -14373,21 +14373,12 @@ video {
 }
 
 @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;
@@ -14395,10 +14386,6 @@ video {
 }
 
 @keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-
   50% {
     opacity: .5;
   }
@@ -14411,7 +14398,7 @@ video {
   }
 
   50% {
-    transform: translateY(0);
+    transform: none;
     animation-timing-function: cubic-bezier(0,0,0.2,1);
   }
 }
diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css
index 0d481f19..54767fad 100644
--- a/__tests__/fixtures/tailwind-output-no-color-opacity.css
+++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css
@@ -11925,21 +11925,12 @@ video {
 }
 
 @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;
@@ -11947,10 +11938,6 @@ video {
 }
 
 @keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-
   50% {
     opacity: .5;
   }
@@ -11963,7 +11950,7 @@ video {
   }
 
   50% {
-    transform: translateY(0);
+    transform: none;
     animation-timing-function: cubic-bezier(0,0,0.2,1);
   }
 }
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 72d1eb12..2063eca1 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -14373,21 +14373,12 @@ video {
 }
 
 @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;
@@ -14395,10 +14386,6 @@ video {
 }
 
 @keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-
   50% {
     opacity: .5;
   }
@@ -14411,7 +14398,7 @@ video {
   }
 
   50% {
-    transform: translateY(0);
+    transform: none;
     animation-timing-function: cubic-bezier(0,0,0.2,1);
   }
 }