userChrome.css・userContent.cssスレ Part12

再生中のアイコンの背景をアニメーションさせる

/* 再生中アイコンの背景アニメーション */

.tab-icon-stack[soundplaying="true"]:after, .tab-icon-stack[muted="true"]:after {
content: '';
position: absolute;
width: 20px;
height: 20px;
margin: -2px;
background: rgba(128, 128, 128, 0.5);
border-radius: 50%;
animation: scaling .6s alternate infinite;
z-index: -1;
}

@keyframes scaling {
0% {scale: 0.8;}
100% {scale: 1.2;}
}