一次应用多个翻译？

Question

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

@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秒的间隙），所以我不必进行数学计算并创建一个长的单个动画关键帧来合并它们。

Answer 1

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

修改

Here's an answer显示了如何将图片包装在<div>中，并将一个转换应用于<div>包装，将第二个转换应用于<img>。

以下是一个例子：

＆＃13;

＆＃13;

#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)}
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;