如何使用关键帧动画分别为多个CSS变换属性设置动画 [英] How to animate multiple CSS transform properties separately using keyframe animation

问题描述

我想使用如下所示的关键帧动画分别为两个(或多个)CSS变换属性设置动画：

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

HTML：

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

translatex动画应以0延迟开始，持续5秒。rotatez动画应以1s延迟开始，持续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？

推荐答案

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

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

您的动画是线性的，但为了使其缓进缓出，我播放了动画的开头和结尾。这仍然不是完美的，但这是我看到你如何才能得到你想要的唯一方法。

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