一次应用多个翻译

Apply multiple translates at once?

本文关键字：翻译 应用 一次      更新时间：2023-09-26

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

@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秒的间隔），所以我不想做数学运算，也不想创建一个长的单个动画关键帧来将它们合并在一起。

根据这个答案，您可能能够链接这两个关键帧动画。

编辑

下面的答案显示了如何将图像包装在<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>

相关文章：