Html 同时发生多个CSS转换

我试图使一个按钮，当点击，淡出和缩小的宽度在同一时间，但我只得到不透明度缓和过渡和宽度立即

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

下面是CSS：

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

div.skypediv{
-webkit过渡：所有700ms轻松；
不透明度：0.7；
-webkit变换：旋转（20度）比例（0.9）平移3D（10px，10px，0）；
}
空中佩迪夫：悬停{
不透明度：1；
-webkit变换：旋转（0度）缩放（1）平移3D（0,0,0）；
}

避免使用javascript更改许多样式。 切换类并使用Skype之类的id

#skype{
-webkit过渡：所有700ms轻松；
-webkit转换：scaleX（1）；
不透明度：1；
}
#skype.hide{
-webkit转换：scaleX（0.5）；
不透明度：0；
}

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

document.getElementById（'skype'）.onclick=function（）{this.classList.add（'hide'）}

仍然没有帮助，我希望它在被点击时崩溃，同时不透明度改变。例如，这是我的HTML:

…onClick=“this.style.opacity='0'；this.style.width='0'”。

@cocco请避免只回答代码。一个小小的解释有很大的帮助。