css - 如何使用关键帧动画分别为多个 ​​CSS 转换属性设置动画

Question

我想像这样使用关键帧动画分别为两个(或更多)CSS 变换属性设置动画:

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

HTML:

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

translatex 动画应该以 0 秒延迟开始并持续 5 秒。 rotatez 动画应该以 1 秒的延迟开始并持续 3 秒。 .rect 元素开始移动，1 秒后开始旋转，3 秒后停止旋转，再过 1 秒后完成移动。

应用动画:

.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 实现动画的方法，例如关键帧动画或过渡，还是我需要 JavaScript 和 requestAnimationFrame？

Answer 1

是的，这是可能的。不要调用两个动画名称，而是只创建一个包含两个 Action 的动画:

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

查看 Google 的“Animate your HTML5”演示文稿。

这是一个解决方法，尽管它有点粗糙:

@-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);}
}

您的动画是线性的，但为了使其缓入缓出，我播放了动画的开始和结束。它仍然不完美，但这是我看到您如何获得想要的东西的唯一方法。