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 487423 8aa36c4082b2e3ef8aade2028b6ea6033e2c5db2
parent 487422 aeeb2a50c987c18bd461507831c284c5575a32cb
child 487424 2d78ad30fa75b7334ef6ab7aa30ed01a7166ca85
push id9719
push userffxbld-merge
push dateFri, 24 Aug 2018 17:49:46 +0000
treeherdermozilla-beta@719ec98fba77 [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;
   }
 }