首页 文章

我可以使用关键帧动画分别为多个css变换属性设置动画

提问于
浏览 次
10

我想使用这样的关键帧动画分别为两个（或更多）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？

编辑:: my FIDDLE

css animation transform css-animations

1 回答

  • 12

    对的，这是可能的 . 而不是调用2个动画名称，只创建一个动画，其中包含两个动作

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

    看一下关于css动画的谷歌演示文稿：google css animation, slide 12

    如果你给我们一个小提琴，我可以在你的例子上更新我的答案 .

    编辑：这是一个解决方法，即使它有点粗糙版本：$：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);}
}

    现在你的动画是线性的，但为了让它像轻松进出，我只是玩动画的开头和结尾 . 仍然不完美，但这是我看到你如何得到你想要的唯一方式！

    回复于

相关问题