refactor: remove 'transform-origin' from translations animations

igorMSoares · igorMSoares · commit 354b41c972bb · 2022-11-19T21:49:51.000-03:00
diff --git a/js-css-animations/js-animations.css b/js-css-animations/js-animations.css
@@ -30,15 +30,13 @@
   to {
     opacity: 0;
     transform: translateX(-100%);
-    transform-origin: center top;
   }
 }
 
 @keyframes js-anim--slide-left__back {
   from {
     opacity: 0;
     transform: translateX(-100%);
-    transform-origin: center top;
   }
   to {
     opacity: 1;
@@ -54,15 +52,13 @@
   to {
     opacity: 0;
     transform: translateX(100%);
-    transform-origin: center top;
   }
 }
 
 @keyframes js-anim--slide-right__back {
   from {
     opacity: 0;
     transform: translateX(100%);
-    transform-origin: center top;
   }
   to {
     opacity: 1;
@@ -78,15 +74,13 @@
   to {
     opacity: 0;
     transform: translateY(-100%);
-    transform-origin: center top;
   }
 }
 
 @keyframes js-anim--slide-up__back {
   from {
     opacity: 0;
     transform: translateY(-100%);
-    transform-origin: center top;
   }
   to {
     opacity: 1;
@@ -102,15 +96,13 @@
   to {
     opacity: 0;
     transform: translateY(100%);
-    transform-origin: center top;
   }
 }
 
 @keyframes js-anim--slide-down__back {
   from {
     opacity: 0;
     transform: translateY(100%);
-    transform-origin: center top;
   }
   to {
     opacity: 1;

Original file line number	Diff line number	Diff line change
`@@ -30,15 +30,13 @@`
`30`	`30`	`to {`
`31`	`31`	`opacity: 0;`
`32`	`32`	`transform: translateX(-100%);`
`33`		`- transform-origin: center top;`
`34`	`33`	`}`
`35`	`34`	`}`
`36`	`35`
`37`	`36`	`@keyframes js-anim--slide-left__back {`
`38`	`37`	`from {`
`39`	`38`	`opacity: 0;`
`40`	`39`	`transform: translateX(-100%);`
`41`		`- transform-origin: center top;`
`42`	`40`	`}`
`43`	`41`	`to {`
`44`	`42`	`opacity: 1;`
`@@ -54,15 +52,13 @@`
`54`	`52`	`to {`
`55`	`53`	`opacity: 0;`
`56`	`54`	`transform: translateX(100%);`
`57`		`- transform-origin: center top;`
`58`	`55`	`}`
`59`	`56`	`}`
`60`	`57`
`61`	`58`	`@keyframes js-anim--slide-right__back {`
`62`	`59`	`from {`
`63`	`60`	`opacity: 0;`
`64`	`61`	`transform: translateX(100%);`
`65`		`- transform-origin: center top;`
`66`	`62`	`}`
`67`	`63`	`to {`
`68`	`64`	`opacity: 1;`
`@@ -78,15 +74,13 @@`
`78`	`74`	`to {`
`79`	`75`	`opacity: 0;`
`80`	`76`	`transform: translateY(-100%);`
`81`		`- transform-origin: center top;`
`82`	`77`	`}`
`83`	`78`	`}`
`84`	`79`
`85`	`80`	`@keyframes js-anim--slide-up__back {`
`86`	`81`	`from {`
`87`	`82`	`opacity: 0;`
`88`	`83`	`transform: translateY(-100%);`
`89`		`- transform-origin: center top;`
`90`	`84`	`}`
`91`	`85`	`to {`
`92`	`86`	`opacity: 1;`
`@@ -102,15 +96,13 @@`
`102`	`96`	`to {`
`103`	`97`	`opacity: 0;`
`104`	`98`	`transform: translateY(100%);`
`105`		`- transform-origin: center top;`
`106`	`99`	`}`
`107`	`100`	`}`
`108`	`101`
`109`	`102`	`@keyframes js-anim--slide-down__back {`
`110`	`103`	`from {`
`111`	`104`	`opacity: 0;`
`112`	`105`	`transform: translateY(100%);`
`113`		`- transform-origin: center top;`
`114`	`106`	`}`
`115`	`107`	`to {`
`116`	`108`	`opacity: 1;`