多个同时CSS3变换以不同的速度过渡 [英] Multiple, simultaneous CSS3 transform transitions at varied speeds

问题描述

是否有可能对一个元素进行两次不同的转换并使它们以不同的速度转换?

Is it even possible to do two different transforms on an element and have them transition at different speeds?

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 1s linear, height 2s linear;
}

div:hover {
  width: 200px;
  height: 400px;
}

请注意，宽度扩展到200px需要1秒，高度扩展到400px需要2秒.

Notice how it takes 1 second for the width to expand to 200px, and 2 seconds for the height to expand to 400px.

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: transform 1s linear, transform 2s linear;
}

div:hover {
  transform: scale(1.5);
  transform: rotate(45deg);
}

注意它仅执行第二次转换的方式.如何指定要为过渡执行的变换?这是CSS转换设计的疏忽吗?我该如何完成这项工作?

Notice how it only performs the second transform. How can you specify which transform to perform for the transition? Is this an oversight in the design of CSS transforms? How can I go about accomplishing this?

推荐答案

不要以为您可以按照自己的方式来做.可能的解决方案是包装对象

Don't think you can do it the way you are attempting. Possible solutions would be a wrapper object

例如

多个转换

样本小提琴此处

示例代码(HTML)

<div class="wrap">
<div class="inner"></div>
</div>

和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答复中提到的动画和关键帧

or use animations and keyframes as mentioned in answer by @slynagh

仅需注意，在chrome上转换时(在V33上为i.m)，transform属性似乎不起作用，但在IE11上效果很好，这就是我在此进行的所有测试

Just out of note, the transform property doesn't seem to work when used in transition on chrome (i.m on V33), but it works fine on IE11, thats all I have tested this on

这篇关于多个同时CSS3变换以不同的速度过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！