Bug 1421672 - Explicitly declare the start/end values of CSS animations since optimizations require both. r?mconley draft
authorJared Wein <jwein@mozilla.com>
Wed, 29 Nov 2017 12:49:22 -0500
changeset 705702 40119b4996cd1553651c76ecde80aea2036d3267
parent 703662 cad9c9573579698c223b4b6cb53ca723cd930ad2
child 742430 4781fff37dd1d52f279e11b3be5690a9c6084cf1
push id91551
push userbmo:jaws@mozilla.com
push dateThu, 30 Nov 2017 15:07:06 +0000
reviewersmconley
bugs1421672
milestone59.0a1
Bug 1421672 - Explicitly declare the start/end values of CSS animations since optimizations require both. r?mconley MozReview-Commit-ID: 2U0Uia1pYF8
browser/themes/shared/customizableui/customizeMode.inc.css
browser/themes/shared/customizableui/panelUI.inc.css
toolkit/components/alerts/resources/content/alert.css
toolkit/themes/shared/alert.inc.css
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -660,16 +660,20 @@ toolbarpaletteitem[place=toolbar] > tool
   height: 20px;
 }
 
 #customization-pong-arena[lives="0"] > #wp-ball {
   animation: game-over 4s forwards ease;
 }
 
 @keyframes game-over {
+  0% {
+    transform: scale(1) translateY(0) rotateZ(0);
+    opacity: 1;
+  }
   15% {
     transform: scale(2) translateY(-10px) rotateZ(-90deg);
   }
   35% {
     opacity: 1;
   }
   65% {
     opacity: 0;
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -509,16 +509,17 @@ toolbarbutton[constrain-size="true"][cui
   list-style-image: url(chrome://browser/skin/sync.svg);
 }
 
 #appMenu-fxa-label {
   -moz-box-flex: 1;
 }
 
 @keyframes syncRotate {
+  from { transform: rotate(0); }
   to { transform: rotate(360deg); }
 }
 
 #appMenu-fxa-icon[syncstatus="active"] > .toolbarbutton-icon,
 #PanelUI-remotetabs-syncnow[syncstatus="active"] > .toolbarbutton-icon {
   animation: syncRotate 0.8s linear infinite;
   fill: #0a84ff;
 }
--- a/toolkit/components/alerts/resources/content/alert.css
+++ b/toolkit/components/alerts/resources/content/alert.css
@@ -23,12 +23,15 @@
   -moz-box-align: center;
 }
 
 .alertText {
   white-space: pre-wrap;
 }
 
 @keyframes alert-animation {
+  from {
+    visibility: visible;
+  }
   to {
     visibility: hidden;
   }
 }
--- a/toolkit/themes/shared/alert.inc.css
+++ b/toolkit/themes/shared/alert.inc.css
@@ -39,22 +39,28 @@
     opacity: 1;
   }
   to {
     opacity: 0;
   }
 }
 
 @keyframes alert-clicked-animation {
+  from {
+    opacity: 1;
+  }
   to {
     opacity: 0;
   }
 }
 
 @keyframes alert-closing-animation {
+  from {
+    opacity: 1;
+  }
   to {
     opacity: 0;
   }
 }
 
 #alertIcon {
   margin-top: 6px;
   margin-inline-start: 8px;