一次应用多个翻译？

Posted 2023-03-06

【中文标题】一次应用多个翻译？

【英文标题】：Apply multiple translates at once?

【发布时间】：2016-03-29 02:50:36

【问题描述】：

我想知道如何在一个元素上同时发生以下两个动画：

@keyframes BackgroundSnowfall
    from    transform: translate(0px, 0px);
    to      transform: translate(0px, 936px); 

@keyframes shuffle
    0%      transform: translate(0px);
    33%     transform: translate(20px);
    66%     transform: translate(-20px)
    100%    transform: translate(0px)

两个动画在运行时的持续时间差异很大（大约 55 秒的间隔），所以我宁愿不必做数学计算并创建一个长的单个动画关键帧来合并它们。

【参考方案1】：

基于this answer，您或许可以链接两个关键帧动画。

编辑

Here's an answer 展示了如何将图像包装在 <div> 中，并将一个变换应用到 <div> 包装器，并将第二个变换应用到 <img>。

这是一个例子：

#wrapper 
  position: relative;
  animation: vertical 10s infinite;


img 
  animation: horizontal 5s infinite;


@keyframes vertical
    from    transform: translate(0px, 0px);
    to      transform: translate(0px, 936px); 


@keyframes horizontal
    0%      transform: translate(0px);
    33%     transform: translate(20px);
    66%     transform: translate(-20px)
    100%    transform: translate(0px)

<div id="wrapper"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVHhe7dAxEQAgDAAxhHTEvzM8YKG/5y4Kct5clmQFsgJZgaxAViArkBXICmQFsgJZgaxAViArkBXICmQFsgJZgaxAViArkBXICmQFsgJZgaxAViArkBXICmQFsgJZgaxAViArkBXICmQFsgJZgaxAViArkBXICmQFsgJZgaxAViArkBXICmQFsgJZgaxAViArkBXICmQFsgJZgaxAViArkBXICmQFsgJZgaxAViArkBXICmQFsgJZgaxAViArkBXICmQFsgJZgaxAViArkBXICmQFsgJZa3M/KCjwdMHWsEkAAAAASUVORK5CYII=" /></div>

【讨论】：

我想使用变换，因为它们比左定位具有更高的处理能力。问题是我的 shuffle 转换覆盖了我的 BackgroundSnowfall 转换。

@JordanCarter 我编辑了答案——也许这个版本对你有用？

谢谢，这很有帮助。