如何反轉webkit中的css關鍵幀動畫？

我有一個控件，我想在關鍵幀動畫之後的兩個位置之間轉換。有沒有辦法使用相同的關鍵幀，但相反？另外，有沒有辦法停止動畫，中途倒轉到一開始？如何反轉webkit中的css關鍵幀動畫？

這裏是我現在（我想這兩個關鍵幀結合：

@-webkit-keyframes explode { 
    0% { 
-webkit-transform: scale(1.0) rotate(0deg) translate(0px, 0px); 
} 
33% { 
    -webkit-transform: scale(2.0) translate(100px, -150px); 
} 
67% { 
    -webkit-transform: scale(2.0) translate(200px, -250px); 
} 
100% { 
    -webkit-transform: scale(1.0) translate(-15px, -15px); 
} 
} 

@-webkit-keyframes explodeBack { 
0% { 
    -webkit-transform: scale(1.0) translate(-15px, -15px); 
} 
67% { 
    -webkit-transform: scale(2.0) translate(100px, -150px); 

} 
100% { 
    -webkit-transform: scale(1.0) rotate(0deg) translate(0px, 0px); 

} 
} 

.leftArrowAnimateForward{ 
    -webkit-animation-name: explode; 
    -webkit-animation-duration: 3s; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-direction:normal; /* Safari and Chrome */ 
     -webkit-transform: scale(1.0) translate(-15px, -15px); 
} 

.leftArrowAnimateBackward{ 
    -webkit-animation-name: explodeBack; 
    -webkit-animation-duration: 3s; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-direction:alternate; 
     -webkit-transform: scale(1.0) translate(0px, 0px); 
}

來源

2011-10-05 QuinnBaetz

您確定您需要CSS動畫嗎？你試圖做的事情非常容易與CSS過渡，但關鍵幀版本涉及很多醜陋的js – Duopixel

是的，我虛弱了我的代碼，但實際的關鍵幀要複雜得多。 – QuinnBaetz

嗯......我不認爲你要找的東西可以在CSS3中完成，只能看到「動畫方向」值是正常的和替代的。替補會在正常的方向進行，然後相反，但我認爲你不能完全相反地進行。 –

很難看到你的努力沒有視覺上看到你有什麼到目前爲止做的，但結賬動畫補 - 模式。

這將允許設置轉發，其中，在現階段，我相信他們時完成的關鍵幀回到0時動畫停在最後一個關鍵幀。

有一齣戲，讓我們知道你的成功。

來源

2012-01-21 09:27:55 DanV

如果將animation-iteration-count：2與動畫方向：alternate以及動畫延遲組合爲動畫長度的負值相結合，則可以執行第一件事：一個動畫只能反向播放一次。（它基本上向前跳到相反方向的動畫並開始播放。）

除非您定義第二組關鍵幀並在類之間切換，否則無法對純CSS動畫執行第二件事與JS（或懸停或其他）

來源

2012-09-27 16:05:12

如何反轉webkit中的css關鍵幀動畫？

回答

相關問題