一次應用多個翻譯？

我不知道我怎麼可以有以下兩個動畫同時出現的元素：一次應用多個翻譯？

@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第二間隙運行），所以我寧願不必做數學計算，並創建一個長單個動畫關鍵幀來合併它們。

來源

2015-12-22 Jordan Carter

基於this answer，你也許能夠鏈兩個關鍵幀動畫。

EDIT

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>

來源

2015-12-22 20:02:26 rphv

我想用變換，但是，因爲他們比左側定位更高的處理能力。問題是我的洗牌轉換重寫了我的BackgroundSnowfall轉換。 –

@JordanCarter我編輯了答案 - 也許這個版本適合你？ – rphv

謝謝，這很有幫助。 –

一次應用多個翻譯？

回答

相關問題