Fix Link transition perf by specifying properties (#8)

Fix Link transition perf by specifying properties
storybookjs · Jun 6, 2019 · aafc25c · aafc25c
2 parents 469fabe + f456020
commit aafc25c
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/src/components/Link.js b/src/components/Link.js
@@ -8,19 +8,19 @@ import { color } from './shared/styles';
 
 const linkStyles = css`
   display: inline-block;
-  transition: all 150ms ease-out;
+  transition: transform 150ms ease-out, color 150ms ease-out;
   text-decoration: none;
 
   color: ${color.secondary};
 
   &:hover,
   &:focus {
     cursor: pointer;
-    transform: translate3d(0, -1px, 0);
+    transform: translateY(-1px);
     color: ${darken(0.07, color.secondary)};
   }
   &:active {
-    transform: translate3d(0, 0, 0);
+    transform: translateY(0);
     color: ${darken(0.1, color.secondary)};
   }