一次发生多个CSS转换

Question

我试图制作一个按钮，当点击时，同时淡出和缩小宽度，但我只是通过过渡和宽度立即获得不透明度。

这是它所在的网站，here it is.这是底部的Skype聊天按钮。

这是CSS：

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

Answer 1

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);
}

Answer 2

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

#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')}