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/

CSS转换只有一个转换函数

1 个答案: