javascript - 一次应用多个翻译？

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> .

这是一个例子:

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