Merge pull request tailwindlabs#2114 from MartijnCuppens/remove-redundant-animation-states

adamwathan · web-flow · commit 0ca1c1436530 · 2020-08-07T14:14:14.000-04:00
Remove redundant animation states
diff --git a/__tests__/fixtures/tailwind-output-ie11.css b/__tests__/fixtures/tailwind-output-ie11.css
@@ -10951,32 +10951,19 @@ 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;
   }
 }
 
 @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
@@ -14563,32 +14563,19 @@ 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;
   }
 }
 
 @keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-
   50% {
     opacity: .5;
   }
@@ -14601,7 +14588,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
@@ -12115,32 +12115,19 @@ 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;
   }
 }
 
 @keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-
   50% {
     opacity: .5;
   }
@@ -12153,7 +12140,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
@@ -14563,32 +14563,19 @@ 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;
   }
 }
 
 @keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-
   50% {
     opacity: .5;
   }
@@ -14601,7 +14588,7 @@ video {
   }
 
   50% {
-    transform: translateY(0);
+    transform: none;
     animation-timing-function: cubic-bezier(0,0,0.2,1);
   }
 }
diff --git 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)',
         },
       },

Original file line number	Diff line number	Diff line change
`@@ -10951,32 +10951,19 @@ video {`
`10951`	`10951`	`}`
`10952`	`10952`
`10953`	`10953`	`@keyframes spin {`
`10954`		`- from {`
`10955`		`- transform: rotate(0deg);`
`10956`		`- }`
`10957`		`-`
`10958`	`10954`	`to {`
`10959`	`10955`	`transform: rotate(360deg);`
`10960`	`10956`	`}`
`10961`	`10957`	`}`
`10962`	`10958`
`10963`	`10959`	`@keyframes ping {`
`10964`		`- 0% {`
`10965`		`- transform: scale(1);`
`10966`		`- opacity: 1;`
`10967`		`- }`
`10968`		`-`
`10969`	`10960`	`75%, 100% {`
`10970`	`10961`	`transform: scale(2);`
`10971`	`10962`	`opacity: 0;`
`10972`	`10963`	`}`
`10973`	`10964`	`}`
`10974`	`10965`
`10975`	`10966`	`@keyframes pulse {`
`10976`		`- 0%, 100% {`
`10977`		`- opacity: 1;`
`10978`		`- }`
`10979`		`-`
`10980`	`10967`	`50% {`
`10981`	`10968`	`opacity: .5;`
`10982`	`10969`	`}`
`@@ -10989,7 +10976,7 @@ video {`
`10989`	`10976`	`}`
`10990`	`10977`
`10991`	`10978`	`50% {`
`10992`		`- transform: translateY(0);`
	`10979`	`+ transform: none;`
`10993`	`10980`	`animation-timing-function: cubic-bezier(0,0,0.2,1);`
`10994`	`10981`	`}`
`10995`	`10982`	`}`
Original file line number	Diff line number	Diff line change
`@@ -14563,32 +14563,19 @@ video {`
`14563`	`14563`	`}`
`14564`	`14564`
`14565`	`14565`	`@keyframes spin {`
`14566`		`- from {`
`14567`		`- transform: rotate(0deg);`
`14568`		`- }`
`14569`		`-`
`14570`	`14566`	`to {`
`14571`	`14567`	`transform: rotate(360deg);`
`14572`	`14568`	`}`
`14573`	`14569`	`}`
`14574`	`14570`
`14575`	`14571`	`@keyframes ping {`
`14576`		`- 0% {`
`14577`		`- transform: scale(1);`
`14578`		`- opacity: 1;`
`14579`		`- }`
`14580`		`-`
`14581`	`14572`	`75%, 100% {`
`14582`	`14573`	`transform: scale(2);`
`14583`	`14574`	`opacity: 0;`
`14584`	`14575`	`}`
`14585`	`14576`	`}`
`14586`	`14577`
`14587`	`14578`	`@keyframes pulse {`
`14588`		`- 0%, 100% {`
`14589`		`- opacity: 1;`
`14590`		`- }`
`14591`		`-`
`14592`	`14579`	`50% {`
`14593`	`14580`	`opacity: .5;`
`14594`	`14581`	`}`
`@@ -14601,7 +14588,7 @@ video {`
`14601`	`14588`	`}`
`14602`	`14589`
`14603`	`14590`	`50% {`
`14604`		`- transform: translateY(0);`
	`14591`	`+ transform: none;`
`14605`	`14592`	`animation-timing-function: cubic-bezier(0,0,0.2,1);`
`14606`	`14593`	`}`
`14607`	`14594`	`}`
Original file line number	Diff line number	Diff line change
`@@ -12115,32 +12115,19 @@ video {`
`12115`	`12115`	`}`
`12116`	`12116`
`12117`	`12117`	`@keyframes spin {`
`12118`		`- from {`
`12119`		`- transform: rotate(0deg);`
`12120`		`- }`
`12121`		`-`
`12122`	`12118`	`to {`
`12123`	`12119`	`transform: rotate(360deg);`
`12124`	`12120`	`}`
`12125`	`12121`	`}`
`12126`	`12122`
`12127`	`12123`	`@keyframes ping {`
`12128`		`- 0% {`
`12129`		`- transform: scale(1);`
`12130`		`- opacity: 1;`
`12131`		`- }`
`12132`		`-`
`12133`	`12124`	`75%, 100% {`
`12134`	`12125`	`transform: scale(2);`
`12135`	`12126`	`opacity: 0;`
`12136`	`12127`	`}`
`12137`	`12128`	`}`
`12138`	`12129`
`12139`	`12130`	`@keyframes pulse {`
`12140`		`- 0%, 100% {`
`12141`		`- opacity: 1;`
`12142`		`- }`
`12143`		`-`
`12144`	`12131`	`50% {`
`12145`	`12132`	`opacity: .5;`
`12146`	`12133`	`}`
`@@ -12153,7 +12140,7 @@ video {`
`12153`	`12140`	`}`
`12154`	`12141`
`12155`	`12142`	`50% {`
`12156`		`- transform: translateY(0);`
	`12143`	`+ transform: none;`
`12157`	`12144`	`animation-timing-function: cubic-bezier(0,0,0.2,1);`
`12158`	`12145`	`}`
`12159`	`12146`	`}`