Bug 1421672 - Explicitly declare the start/end values of CSS animations since optimizations require both. r?mconley
MozReview-Commit-ID: 2U0Uia1pYF8
--- 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;