html - 一次发生多个 CSS 过渡

Question

我正在尝试制作一个按钮，当单击时，它会同时淡出并缩小宽度，但我只能立即通过过渡和宽度来缓和不透明度。

这是它所在的网站，在这里。它是底部的 Skype 聊天按钮。

这是CSS：

div.skypediv{
     transition: all 3s;
     -webkit-transition:all 3s; /*Safari*/
}

Answer 1

避免使用 javascript 更改许多样式。切换课程并使用 Skype 之类的东西作为 id。

#skype{
-webkit-transition:all 700ms ease;
-webkit-transform:scaleX(1);
opacity:1;
}
#skype.hide{
-webkit-transform:scaleX(0.5);
opacity:0;
}

然后使用 javascript 执行以下操作：

document.getElementById('skype').onclick=function(){this.classList.add('hide')}

Answer 2

div.skypediv{
 -webkit-transition:all 700ms ease;
 opacity:0.7;
-webkit-transform:rotate(20deg) scale(0.9) translate3d(10px,10px,0);
}
div.skypediv:hover{
 opacity:1;
-webkit-transform:rotate(0deg) scale(1) translate3d(0,0,0);
}