CSS 过渡只有一个变换函数

Question

有没有办法只为一个变换函数设置动画？例如，我只想要我的比例功能转换。我将如何做到这一点

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

---

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

Answer 1

我玩过你的代码，是的，你可以。只需将不同的转换函数分配给不同的类，然后只使用您想要的那些类……就像这样。

重要的是DO NOT FORGET 在使用动画使其工作时使用相应的browser supported engines。以下是支持各种动画功能的各种浏览器的列表。

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 here

如果你想一起缩放和旋转，那么你给出的类应该可以工作。 你也可以查看 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/