CSS转换仅限于一个变换函数。

Question

有没有办法只对一个变换函数进行动画处理？例如，我只想在缩放函数上进行过渡动画。我该怎么做？

.my-class {
    transition: transform;
}
.large {
    transform: scale(2) rotate(90deg);
}

---

<div class="my-class"></div>
<div class="my-class large"></div>

- Liky

---

你具体做了什么？（包括供应商前缀和过渡时间）有什么不起作用的？ - bjb568

@bjb568，我实际上想要的并不是在我的过渡中包含旋转，因为它已经在变换属性中了。我的目标只是使变换属性中的缩放函数进行动画化。帮忙一下。 - Liky

哦，那我不知道怎么做。 - bjb568

你想要仅转换 .large 类吗？ - Prasanth

@Prasanth 是的，但只有比例会动画。 - Liky

Answer 1

我稍微改了一下你的代码，是可以实现的。只需将不同的变换函数分配给不同的类，并仅使用你想要的那些类即可…就像这样。

重要的是，在使用动画时不要忘记使用相应的浏览器支持引擎使其正常工作。以下是各种浏览器支持的各种动画功能的列表。

http://css3.bradshawenterprises.com/support/

.my-class {
    transition: transform;
}

.scale_and_rotate {
    -webkit-transform: scale(2) rotate(90deg);
    -moz-transform: scale(2) rotate(90deg);
    -ms-transform: scale(2) rotate(90deg);
    -o-transform: scale(2) rotate(90deg);    
}

.scale_class {
    -webkit-transform: scale(2); // Safari and Chrome(Engine:-Webkit)
    -moz-transform: scale(2); // Mozilla(Engine:-Gecko)
    -ms-transform: scale(2); // IE(Engine:-Trident)
    -o-transform: scale(2); // Opera(Engine:-Presto)
}


.rotate_class {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

最后，您可以根据您的要求应用这些类。

<div class="my-class"></div>
<div class="my-class scale_class"></div> // only scale function
<div class="my-class rotate_class"></div> // only rotate function
<div class="my-class scale_and_rotate"></div> // both scale and rotate function

请点击这里查看JSFiddle

如果你想同时进行缩放和旋转，那么你提供的类应该有效。 此外，你可以查看CSS的@keyframes来实现这一点。以下是一些很好的教程。

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/

- Nikhil Nanjappa

---

你在浏览器上尝试过这段代码吗？我认为“同时缩放和旋转”的div是这样的：rotate_class将覆盖scale_class的transform属性。因为被旋转函数覆盖了，所以缩放函数不会被执行。抱歉我表达得可能不太好，但我希望你能理解我的意思。 - Liky

哎呀，我忘记添加一个类了。已经编辑了更改，请查看fiddle获取完整代码。 - Nikhil Nanjappa

对不起，我也忘记将过渡值设置为[transform 2s]，再次抱歉，因为我对我想要的东西没有做出具体解释。现在我的主要观点是，例如我有一个没有类的div，我有一个脚本会在上面放置一个类(scale_and_rotate)，然后我只想让转换函数在缩放功能上进行2秒的转换，旋转将不进行任何动画。 - Liky

好的，那么您能否现在更新问题，以便其他人也可以帮助您呢？ - Nikhil Nanjappa

并且，你能否创建一个 fiddle 来更好地解释你的问题？ - Nikhil Nanjappa