我可以使用关键帧动画分别为多个CSS转换属性设置动画吗 [英] Can I animate multiple css transform properties separately using keyframe animation

问题描述

我想使用如下关键帧动画分别为两个（或多个）css转换属性设置动画：

I want to animate two (or more) css transform properties separately using keyframe animation like this:

@keyframes translatex {
    100% {
        transform: translateX(100px);
    }
}
@keyframes rotatez {
    100% {
        transform: rotateZ(80deg);
    }
}

HTML：

<div class="rect"></div>

translatex动画应以0s延迟开始，并持续5秒钟。 rotationz动画应以1秒的延迟开始，并持续3秒钟。因此.rect元素开始移动，然后在1秒钟后开始旋转，然后在3秒钟后停止旋转，再过1秒钟完成移动。

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.

应用动画：

.rect {
    animation-name: translatex, rotatez;
    animation-duration: 5s, 3s;
    animation-timing-function: ease, ease-in-out;
    animation-delay: 0s, 1s;
    animation-direction: forward, forward;
}

这里的问题是仅应用了rotatez动画。我的问题是：有没有办法仅使用CSS（关键帧动画，过渡）来实现这种动画，或者我需要JS和requestAnimationFrame？

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?

: 我的字段

推荐答案

是的，有可能。不用调用2个动画名称，只需创建一个动画，同时将两个动作都包含在内

Yes, it is possible. Instead of calling 2 animation-names, create only one animation with both actions inside

@keyframes translateXandZ {
    100% {
        transform: translateX(100px) rotateZ(80deg);
    }
}

看看Google演示CSS动画： google css动画，幻灯片12

Have a look to a google presentation on css animation : google css animation, slide 12

如果您给我们弄个小提琴，我可以在您的示例中更新我的答案。

If you give us a fiddle, I can update my answer on your example.

编辑：这是一种解决方法，即使它是粗略的版本：$：小提琴

here is a workaround, even though it is a bit of a coarse version :$ : 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 !

这篇关于我可以使用关键帧动画分别为多个CSS转换属性设置动画吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！