一次应用多个翻译？答案

【问题标题】：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 秒的间隔），所以我宁愿不必做数学计算并创建一个长的单个动画关键帧来合并它们。

【问题讨论】：

标签： javascript jquery css animation transform

【解决方案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)}
}

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

【讨论】：

我想使用变换，因为它们比左定位具有更高的处理能力。问题是我的 shuffle 转换覆盖了我的 BackgroundSnowfall 转换。
@JordanCarter 我编辑了答案——也许这个版本对你有用？
谢谢，这很有帮助。