使用css3和jquery分别进行缩放和旋转

Question

更新并澄清了

我需要执行一些jquery，对图标执行立即旋转(使用css3转换)。然后，一旦图标被旋转，我想要动画和缩放到200%的大小。但是，由于缩放和旋转都是一个CSS3属性(transform)，我看到这两个转换都是作为0.5s的动画进行的。(在JQUERY代码中，我还更新了位置(顶部、左边)，但由于不是在转换: tag中，所以它会根据需要立即发生)。

我想要的是旋转立即发生，尺度发生在2s以上。有什么想法吗？

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.5s的动画中。

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转换属性不可能是真正的单独动画，除非你恰好对转换矩阵很在行，并且准备为一个更好的动画系统编写大量支持代码。您不仅需要处理将转换属性转换为转换矩阵的问题，而且还需要某种系统来动态地混合不同的矩阵状态，这样才能真正地将时间解耦。这需要大量的高等数学和开发时间，这很可能更好地花在其他地方。

编辑:进一步阅读：如何读取js中的单个转换值

EDIT2:取决于您到底想要做什么，您可以通过将动画分割到几个嵌套的div中来分离它们。例如：最外层的div处理比例动画，其中是带有旋转动画的div。CSSdeck实例