多个同步CSS3变换以不同的速度转换

不要以为你可以按照你的方式去做.可能的解决方案是包装器对象

例如

多次转换

样品在这里小提琴

示例代码(HTML)

和CSS

.wrap {
    width: 100px;
    height: 100px;
    transition: transform 1s linear;
}
.inner {
    width: 100%;
    height: 100%;
    background: red;
    transition: transform 2s linear;
}
.wrap:hover {
    transform: scale(1.5);
}
.wrap:hover .inner {
    transform: rotate(45deg);
}

或使用@slynagh回答中提到的动画和关键帧

只是不注意,转换属性在chrome上转换时使用似乎不起作用(在V33上即可),但它在IE11上工作正常,这就是我所测试的所有内容