From 54b7aededa4237483d128ea3bb499f8760a23a5d Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Mon, 24 Jun 2019 15:46:13 +0300 Subject: [PATCH] Animate background-position with steps() timing to reduce cpu use --- chrome/tabs_animated_gradient_border.css | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/chrome/tabs_animated_gradient_border.css b/chrome/tabs_animated_gradient_border.css index b077fe8..5c9dd56 100644 --- a/chrome/tabs_animated_gradient_border.css +++ b/chrome/tabs_animated_gradient_border.css @@ -1,23 +1,26 @@ /* Adds animated gradient border below tabs and around selected tab */ -/* Might or might not work, no promises*/ +/* Might or might not work, no promises */ /* Constant animation WILL increase CPU usage */ +/* +Thanks to /u/skenera on reddit for suggesting animating background position and using steps() function to reduce cpu load +*/ @keyframes rotate-gradient{ - from{filter: hue-rotate(0deg)} - to{filter: hue-rotate(360deg)} + from{background-position: 0 0;} + to{background-position: 200vw 0;} } #TabsToolbar::before{ content: ""; display: -moz-box; position: absolute; - width: 100vw; + width: 200vw; height: calc(var(--tab-min-height) + 2px); - background-image: linear-gradient(to right, magenta, yellow, cyan); - animation: rotate-gradient 5s linear infinite; + background-image: linear-gradient(to right, magenta, red, yellow, green, cyan, blue, magenta); + animation: rotate-gradient 10s steps(60) infinite; + /*animation-timing-function: linear; */ /* smoother animation, but greatly increased cpu use */ pointer-events: none; - will-change: filter; z-index: -1; } @@ -41,7 +44,9 @@ opacity: 1 !important; } -.tabbrowser-tab{ padding: 2px 2px 0 2px !important; min-height: calc(var(--tab-min-height) - 2px);} +.tabbrowser-tab{ padding: 2px 2px 0 2px !important; } +.tabbrowser-tab:not([selected]){ min-height: calc(var(--tab-min-height) - 2px) !important; } + .tabbrowser-tab[selected]{ padding: 0px !important;