diff --git a/chrome/panel/statuspanel.css b/chrome/panel/statuspanel.css index d36345a..6574877 100644 --- a/chrome/panel/statuspanel.css +++ b/chrome/panel/statuspanel.css @@ -35,10 +35,17 @@ #statuspanel-label { font-size: 20px !important; padding: 5 5px !important; /* Padding on the sides */ - /* Fully transparent background */ - background-color: rgba(32, 32, 32, 0) !important; + background-color: rgba( + 32, + 32, + 32, + 0 + ) !important; /* Fully transparent background */ color: #c38f8f !important; animation: heartbeat 1.5s ease-in-out infinite; + will-change: transform; /* Hint to the browser to optimize for transform changes */ + backface-visibility: hidden; /* Prevents flickering */ + transform: translateZ(0); /* Creates a new layer for the element */ } /* Hide the status panel */ diff --git a/chrome/styling/animations.css b/chrome/styling/animations.css index 4a84630..d6c55c2 100644 --- a/chrome/styling/animations.css +++ b/chrome/styling/animations.css @@ -177,14 +177,12 @@ } @keyframes heartbeat { - 0% { + 0%, + 100% { transform: scale(1); } 50% { - transform: scale(1.1); - } - 100% { - transform: scale(1); + transform: scale(1.2); } }