Apply multiple translates at once?

Question

I'm wondering how I can have the following two animations happen on an element simultaneously:

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

Both the animations are being run with a very wide difference in their duration (about a 55 second gap), so I'd rather not have to do the math and create a long single animation keyframes to incorporate them both.

score 0 · Accepted Answer · edited May 23 '17 at 11:52

Based on this answer, you might be able to chain the two keyframe animations.

EDIT

Here's an answer that shows how to wrap an image in a <div> and apply one transform to the <div> wrapper and a second transform to the <img>.

Here's an example:

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

I would like to use transforms, though, because they have a higher processing power than left positioning. The issue is my shuffle transform is overriding my BackgroundSnowfall transform. — Jordan Carter, Dec 23 '15 at 05:44
@JordanCarter I edited the answer - maybe this version will work for you? — rphv, Dec 23 '15 at 16:38

Apply multiple translates at once?

1 Answers1