diff --git a/public/styles.css b/public/styles.css index bbe8016..1ed05d3 100644 --- a/public/styles.css +++ b/public/styles.css @@ -217,7 +217,9 @@ a:hover { border-bottom: 1px solid #313131; } color: #fff; } .channelList__channelIconActive svg { - animation: pulseWidth 1s linear infinite; + animation: pulseScaleSmooth 1.6s ease-in-out infinite; + transform-origin: center; + will-change: transform; } .channelList__channelLogo { flex: 1; @@ -243,6 +245,10 @@ a:hover { border-bottom: 1px solid #313131; } 50% { transform: scale(var(--endScale)); } 100% { transform: scale(var(--initialScale)); } } +@keyframes pulseScaleSmooth { + 0%, 100% { transform: scale(1); opacity: .9; } + 50% { transform: scale(1.18); opacity: 1; } +} /* ---------- about / channel descriptions ---------- */ .channel { margin-bottom: 15px; }