Html 以不同的速度同时进行多个 CSS3 转换转换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22082684/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple, simultaneous CSS3 transform transitions at varied speeds
提问by daveycroqet
Question:
题：
Is it even possible to do two different transforms on an element and have them transition at different speeds?
甚至可以对一个元素进行两种不同的变换并让它们以不同的速度进行变换吗？
Example without transforms (Fiddle):
没有转换的示例（Fiddle）：
div {
width: 100px;
height: 100px;
background: red;
transition: width 1s linear, height 2s linear;
}
div:hover {
width: 200px;
height: 400px;
}
Notice how it takes 1 second for the width to expand to 200px, and 2 seconds for the height to expand to 400px.
注意宽度扩展到 200px 需要 1 秒，高度扩展到 400px 需要 2 秒。
Example with transforms (Fiddle):
转换示例（Fiddle）：
div {
width: 100px;
height: 100px;
background: red;
transition: transform 1s linear, transform 2s linear;
}
div:hover {
transform: scale(1.5);
transform: rotate(45deg);
}
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?
注意它是如何只执行第二次转换的。您如何指定要为转换执行的转换？这是 CSS 转换设计的疏忽吗？我怎样才能做到这一点？
回答by OJay
Don't think you can do it the way you are attempting. Possible solutions would be a wrapper object
不要认为你可以按照你正在尝试的方式做到这一点。可能的解决方案是包装对象
eg
例如
sample fiddle here
示例小提琴在这里
sample code (HTML)
示例代码 (HTML)
<div class="wrap">
<div class="inner"></div>
</div>
and CSS
和 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);
}
or use animations and keyframes as mentioned in answer by @slynagh
或使用@slynagh 回答中提到的动画和关键帧
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
值得注意的是，transform 属性在 chrome 上的转换中使用时似乎不起作用（我在 V33 上），但它在 IE11 上运行良好，这就是我在上面测试的全部内容
回答by slynagh
You could try to use animations.
你可以尝试使用动画。
div {
width: 100px;
height: 100px;
background: red;
}
div:hover {
-webkit-animation: anim1 2s linear;
}
@-webkit-keyframes anim1{
0% { -webkit-transform: scale(1) rotate(0deg); }
50% {-webkit-transform: scale(1.5) rotate(22.5deg); }
100% { -webkit-transform: scale(1.5) rotate(45deg); }
}
You would need to also set up the reverse for that hover out effect.
您还需要为该悬停效果设置反向。
回答by slynagh
Unfortunately you have not stumbled on a bug in CSS implementation.
不幸的是，您还没有发现 CSS 实现中的错误。
On :hoverthe second transformstatement is simply overwriting the first one, this is CSS core. And the same applies to transforming the same parameter twice - rules defined later in the CSS or based on selector weight take precedence.
在:hover第二个transform语句直接覆盖第一位的，这是CSS的核心。这同样适用于两次转换相同的参数 - 稍后在 CSS 中定义的规则或基于选择器权重的规则优先。
This would work:
这会起作用：
div {
width: 100px;
height: 100px;
background: red;
transition: transform 1s linear;
}
div:hover {
transform: scale(1.5) rotate(45deg);
}
But for your desired different length transforms the route suggested by @OJay - transform one of the parameters on a wrapper - is a good way.
但是对于您想要的不同长度转换@OJay 建议的路线 - 转换包装器上的参数之一 - 是一种好方法。
As suggested by @slynagh will not work as expected as animations/transformations on a single element are performed linearly.
正如@slynagh 所建议的那样，由于单个元素上的动画/转换是线性执行的，因此不会按预期工作。
But we can make @OJay sample even neater without any additional elements:
但是我们可以让@OJay 样本更整洁，无需任何额外元素：
div {
width: 100px;
height: 100px;
position: relative;
transition: transform 1s linear;
}
div:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: red;
transition: transform 2s linear;
}
div:hover {
transform: scale(1.5);
}
div:hover:after {
transform: rotate(45deg);
}
Though being able to use a pseudo element depends on the content of your div.
虽然能够使用伪元素取决于你的 div 的内容。
Do take note, that you are missing browser specific prefixes and this is not cross browser proof.
请注意，您缺少浏览器特定的前缀，这不是跨浏览器证明。
回答by Rounin
The accepted answer suggests using a wrapper element, but you can achieve this effect most elegantly by simply deploying an animation rather than a transiton.
接受的答案建议使用包装元素，但您可以通过简单地部署动画而不是过渡来最优雅地实现这种效果。
N.B.It is crucial to use animation-fill-mode: forwards;(or the shorthand equivalent) in order that when the animation completes it does not revert back to the start values.
NB使用animation-fill-mode: forwards;（或等效的速记）是至关重要的，以便在动画完成时它不会恢复到起始值。
Working Example:
工作示例：
:root {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
div {
width: 60px;
height: 60px;
background: red;
}
div:hover {
animation: scaleRotate 2s linear forwards;
}
@keyframes scaleRotate {
0% {transform: scale(1) rotate(0deg);}
50% {transform: scale(1.5) rotate(22.5deg);}
100% {transform: scale(1.5) rotate(45deg);}<div></div>