Question

更新和澄清

我需要执行一些在图标上立即旋转（使用css3 transform ）的jquery。然后一旦图标旋转，我想要动画并缩放到200％的大小。但是，由于缩放和旋转都是一个CSS3属性（变换），我看到两个过渡都是0.5秒的动画。（在JQUERY代码中我也更新了位置（顶部，左侧），但由于它不在transition：标签中，它会根据需要立即发生。）

我想要的是旋转立即发生，并且规模超过2秒。有什么想法吗？

CSS：

transition: transform 0.5s;
-webkit-transition: -webkit-transform 0.5s;

JQUERY：

self.pick = function (cmd) {
    var pt = Tools.cmdToPoint(cmd);
    $(self.bbox).css("position", "fixed");
    $(self.bbox).css("top", pt.y - 32);
    $(self.bbox).css("left", pt.x - 32);
    $(self.bbox).css("opacity", "1");
    var theta = self.angle(cmd);
    $(self.bbox).css("transform", "rotate(" + theta + "deg) scale(2.0)");
    $(self.bbox).css("-webkit-transform", "rotate(" + theta + "deg) scale(2.0)");
}

发生的事情是，自项目转换以来，缩放和旋转都会在超过0.5秒的动画中发生。

Answer 1

你真的有两个选择，但我认为嵌套div很可能是你最好的选择。您可以使用jQuery来控制某些动画的时间，但是需要大量的编码才能使其正确。

根据Andrea Ligios条评论，您应该在two类设置延迟，以便在0.5s之后开始转换

HTML

<div id="rotate" class="half rotate">
    <div id="scale" class="two grow">Rotate</div>
</div>

CSS

.half {
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.two {
    transition: all 2s ease-in-out 0.5s;
    -webkit-transition: all 2s ease-in-out 0.5s;
}

#rotate, #scale {
    height: 150px;
    width: 100px;
    text-align: center;
    margin: 0 auto;    
}

#scale {
    border: 1px blue solid; /*for visualization*/
}

.rotate:hover {
    transform: rotateZ(180deg);
    -webkit-transform: rotateZ(180deg);
}

.grow:hover {
    transform: scale(2.0);
    -webkit-transform: scale(2.0);
}

这是一个CSS演示小提琴：http://jsfiddle.net/adjit/w4kgP/5/

您的jQuery选项涉及设置超时，唯一的事情是反向动画不会完全按相反的顺序排列。它将以.5s的间隔收缩和解旋。您也可以为mouseout设置超时

jQuery选项

$('#rotate-scale').hover(function(){
    clearTimeout(timeout);

    $this = $(this);
    $this.addClass('rotate');
    timeout = setTimeout(function(){
        $this.css("-webkit-transition", "all 2s ease-in-out");
        $this.addClass('grow');
    }, 500);
}, function(){
    clearTimeout(timeout);
    $(this).css("-webkit-transition", "all 0.5s ease-in-out");
    $(this).removeClass('rotate');
    $(this).removeClass('grow');
});

这是一个jQuery演示小提琴：http://jsfiddle.net/adjit/tR7EY/1/

Answer 2

简答：使用GSAP。

答案很长：CSS3变换属性实际上不能单独动画，除非您碰巧对转换矩阵很好，并准备为更好的动画系统编写大量支持代码。您不仅需要处理将变换属性转换为变换矩阵，而且还需要某种系统来动态混合不同的矩阵状态，以实际上能够解耦时序。这需要大量高级数学和开发时间，最好在其他地方使用。

编辑：进一步阅读：How to read individual transform values in js

EDIT2：根据你想要做什么，你可以通过将它们分成几个嵌套的div来分离动画。例如。最外面的div处理缩放动画，其中是一个带旋转动画的div。 CSSdeck example

动画缩放并使用css3和jquery单独旋转

2 个答案:

HTML

CSS

jQuery选项