我可以使用关键帧动画分别为多个 css 变换属性设置动画吗
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13579730/
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
Can I animate multiple css transform properties separately using keyframe animation
提问by Dmitry
I want to animate two (or more) css transform properties separately using keyframe animation like this:
我想使用像这样的关键帧动画分别为两个（或更多）css 变换属性设置动画：
@keyframes translatex {
100% {
transform: translateX(100px);
}
}
@keyframes rotatez {
100% {
transform: rotateZ(80deg);
}
}
HTML:
HTML：
<div class="rect"></div>
translatex animation should start with 0s delay and last for 5 seconds. rotatez animation should start with 1s delay and last for 3 seconds. So .rect element starts moving, then after 1 second it starts rotating, then after 3 seconds it stops rotating and after 1 more second it finishes its movement.
translatex 动画应以 0 秒延迟开始并持续 5 秒。rotatez 动画应以 1 秒延迟开始并持续 3 秒。所以 .rect 元素开始移动，然后在 1 秒后开始旋转，然后在 3 秒后停止旋转，再过 1 秒后完成移动。
Apply animation:
应用动画：
.rect {
animation-name: translatex, rotatez;
animation-duration: 5s, 3s;
animation-timing-function: ease, ease-in-out;
animation-delay: 0s, 1s;
animation-direction: forward, forward;
}
The problem here is that only rotatez animation is applied. My question is: are there any ways to implement such animation using just css (keyframe animation, transitions) or I need JS and requestAnimationFrame?
这里的问题是只应用了rotatez 动画。我的问题是：有什么方法可以仅使用 css（关键帧动画、过渡）或我需要 JS 和 requestAnimationFrame 来实现此类动画？
EDIT :: my FIDDLE
编辑：我的小提琴
回答by leMoisela
Yes, it is possible. Instead of calling 2 animation-names, create only one animation with both actions inside
对的，这是可能的。不要调用 2 个动画名称，而是只创建一个包含两个动作的动画
@keyframes translateXandZ {
100% {
transform: translateX(100px) rotateZ(80deg);
}
}
Have a look to a google presentation on css animation : google css animation, slide 12
看看关于 css 动画的谷歌演示：谷歌 css 动画，幻灯片 12
If you give us a fiddle, I can update my answer on your example.
如果你给我们一个小提琴，我可以在你的例子中更新我的答案。
EDIT: here is a workaround, even though it is a bit of a coarse version :$ : fiddle
编辑：这是一个解决方法，即使它是一个粗略的版本:$ : fiddle
@-webkit-keyframes translateXandZ {
0% {-webkit-transform: translateX(0px) rotateZ(0deg);}
2% {-webkit-transform: translateX(1px) rotateZ(0deg);}
5% {-webkit-transform: translateX(3px) rotateZ(0deg);}
20% {-webkit-transform: translateX(20px) rotateZ(0deg);}
80% {-webkit-transform: translateX(80px) rotateZ(80deg);}
95% {-webkit-transform: translateX(97px) rotateZ(80deg);}
98% {-webkit-transform: translateX(99px) rotateZ(80deg);}
100% {-webkit-transform: translateX(100px) rotateZ(80deg);}
}
Now your animation is linear, but to make it like ease-in-out, I just played with the beginning and ending of the animation. Still not perfect, but this is the only way I see how you could get what you want !
现在你的动画是线性的，但为了让它像缓入淡出一样，我只是玩了动画的开头和结尾。仍然不完美，但这是我看到您如何获得想要的东西的唯一方法！
