Bug 1476531 - Tweak the animation timing on the tracking protection shield animation. r=nhnt11
authorJohann Hofmann <jhofmann@mozilla.com>
Mon, 20 Aug 2018 10:47:57 +0000
changeset 432325 8aa36c4082b2
parent 432324 aeeb2a50c987
child 432326 2d78ad30fa75
push id34473
push usershindli@mozilla.com
push dateMon, 20 Aug 2018 16:30:57 +0000
treeherdermozilla-central@3d64c00c695a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnhnt11
bugs1476531
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1476531 - Tweak the animation timing on the tracking protection shield animation. r=nhnt11 Differential Revision: https://phabricator.services.mozilla.com/D3621
browser/themes/shared/identity-block/identity-block.inc.css
--- a/browser/themes/shared/identity-block/identity-block.inc.css
+++ b/browser/themes/shared/identity-block/identity-block.inc.css
@@ -224,51 +224,57 @@
   --tracking-protection-shield-color: #c069ff;
 }
 
 @keyframes tp-icon-animation {
   from {
     transform: translateX(0);
     fill-opacity: 0.3;
   }
-  38% {
+  30% {
     fill: inherit;
     fill-opacity: 0.3;
   }
-  39% {
+  31% {
     fill: var(--tracking-protection-shield-color);
     fill-opacity: 1;
   }
-  75% {
+  50% {
     transform: translateX(-1232px);
     fill: var(--tracking-protection-shield-color);
+  }
+  65% {
+    fill: var(--tracking-protection-shield-color);
     fill-opacity: 1;
   }
   to {
     fill: inherit;
     fill-opacity: inherit;
   }
 }
 
 @keyframes tp-icon-animation-rtl {
   from {
     transform: scaleX(-1) translateX(0);
     fill-opacity: 0.3;
   }
-  38% {
+  30% {
     fill: inherit;
     fill-opacity: 0.3;
   }
-  39% {
+  31% {
     fill: var(--tracking-protection-shield-color);
     fill-opacity: 1;
   }
-  75% {
+  50% {
     transform: scaleX(-1) translateX(-1232px);
     fill: var(--tracking-protection-shield-color);
+  }
+  65% {
+    fill: var(--tracking-protection-shield-color);
     fill-opacity: 1;
   }
   to {
     fill: inherit;
     fill-opacity: inherit;
   }
 }