为什么过渡效果仅适用于一个属性？答案

【问题标题】：Why is the transition effect working only on one property?为什么过渡效果仅适用于一个属性？
【发布时间】：2016-12-12 22:28:24
【问题描述】：

img {
  width: 40%;
  height: 30%;
  padding: 3%;
  transition: all 2s;
}
img:hover {
  -webkit-transform: rotate(360deg);
  -webkit-transform: scaleX(2);
  -webkit-transition: all 1s;
}

&lt;img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg"&gt;

在这里，transition 属性是为所有属性定义的。然而，当鼠标悬停在图像上时，只有第二个变换属性（定义 scaleX() 函数的那个）会改变。第一个变换属性保持不变。为什么第一个没有改变？如何同时更改它们？

【问题讨论】：

你需要写在一行：-webkit-transform: rotate(360deg), scaleX(2);
@n00dl3 我试过了，但它甚至导致一个属性停止更改。

标签： html css css-transitions css-transforms

【解决方案1】：

img {
  width: 40%;
  height: 30%;
  padding: 3%;
  transition: all 2s;
}
img:hover {
 -webkit-transform: rotate(360deg) scaleX(2);
 }

小提琴：https://jsfiddle.net/c6z4wy5x/

【讨论】：

我们不使用逗号来分隔不同的值吗？
CSS 中有没有一些优先级机制？还是只是改变了过渡属性之前的属性？