CSS 3：翻译操作的正确"transition-property"

Question

单击对象时，我使用以下代码来实现对象的简单translation。

$('#div1').on('click', function () {
$(this).toggleClass('pushObject');
});

#div1 {
width:30px;
height:30px;
background-color:green;
cursor:pointer;
transition: all 0.5s ease;
}
#div1:hover {
background-color:red;
}
.pushObject {
transform: translate(250px, 0px);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="div1"></div>

它按预期工作，并且我为all获得了一个平滑的0.5秒动画——转换(在这种情况下是translate和hover)，因为我已经将css中的transition-property值设置为all。

我想要的是将这个0.5秒的Transition仅限于translate，而不是hover。

这可以通过在css中设置正确的transition-property来实现，但我找不到正确的值。

那么，这里transition-property的正确值是多少，这样动画只适用于translate，而不适用于任何其他transition。

这是JsFiddle。

Answer 1

在transform: translate(250px, 0px)声明中，该属性称为transform，该属性的值为translate(250px, 0px)函数。

因此，transition-property的正确值为transform:

#div1 {
width:30px;
height:30px;
background-color:green;
cursor:pointer;
transition: transform 0.5s ease;
}

更新的fiddle

$('#div1').on('click', function () {
$(this).toggleClass('pushObject');
});

#div1 {
width:30px;
height:30px;

background-color:green;
cursor:pointer;
-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
-o-transition: -o-transform 0.5s ease;
transition: transform 0.5s ease;
}
#div1:hover {
background-color:red;
}
.pushObject {
transform: translate(250px, 0px);
-webkit-transform: translate(250px, 0px);
-ms-transform: translate(250px, 0px);
-o-transform: translate(250px, 0px);
-moz-transform: translate(250px, 0px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="div1"></div>