小编leM*_*ela的帖子

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

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

HTML:

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

translatex动画应以0秒延迟开始,持续5秒.rotatez动画应以1秒延迟开始并持续3秒.因此,正确的元素开始移动,然后在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(关键帧动画,过渡)实现这样的动画,或者我需要JS和requestAnimationFrame？

编辑:: 我的FIDDLE