Use CSS for muted-blocking animation

[danirabbit]

Fixes #137
Fixes #136

Instead of changing icon name, we transition color with CSS and add a little wiggle while we're at it

Since the current muted icon in the icon set is partial opacity, that is also preserved here. This will need to be changed in icons.

Made the transition a bit faster because:

• We have a wiggle to help it be noticeable
• It looks weird for it to linger too long if we unmute

[cassidyjames]

I like it in general, but the rotation feels weird to me since that icon is not visually weighted in the center. What about a side-to-side wiggle?

Suggested change

	@keyframes volume-blocking {
	0% { -gtk-icon-transform: rotate(20deg); }
	25% { -gtk-icon-transform: rotate(-20deg); }
	50% { -gtk-icon-transform: rotate(10deg); }
	75% { -gtk-icon-transform: rotate(-10deg); }
	100% { -gtk-icon-transform: rotate(5deg); }
	}
	@keyframes volume-blocking {
	20% { -gtk-icon-transform: translateX(4px); }
	40% { -gtk-icon-transform: translateX(-4px); }
	60% { -gtk-icon-transform: translateX(2px); }
	80% { -gtk-icon-transform: translateX(-2px); }
	100% { -gtk-icon-transform: translateX(1px); }
	}

[danirabbit]

This also has an issue with light wallpapers where the transition to change color is very long. So it seems like we need some kind of other approach for transitioning back

[jeremypw]

@danrabbit I am converting this to draft as it blocked and there is no recent activity.