WebKit規模轉換問題

我需要關於webkit規模功能的幫助。WebKit規模轉換問題

我有屬性.css文件如下所示：

@-webkit-keyframes expand 
{ 
    from {-webkit-transform:scale(1)} 
    to {-webkit-transform:scale(1.2)} 
} 

.image-highlight 
{ 
    -webkit-animation-name: expand; 
    -webkit-animation-duration:0.2s; 
    -webkit-animation-iteration-count:1; 
    -webkit-animation-timing-function:ease; 
}

我有元素一個HTML：

<div id="slider"> 
    <img src="images/blueMarble_0.PNG" /> 
    <img src="images/blueMarble_1.PNG" /> 
    <img src="images/blueMarble_2.PNG" /> 
    <img src="images/blueMarble_3.PNG" /> 
    <img src="images/blueMarble_4.PNG" /> 
    </div>

我有一個功能，這將動畫（刻度）JS文件數組的中間圖像。，我使用這個jQuery語句來完成動畫：

`$(pic[2]).addClass('image-highlight');`

這個jQuery實際上縮放圖像（PIC [2]）。但縮放發生了0.2秒，並縮小到原來的大小。即使完成0.2秒後，我如何保持縮放比例？我不想調整它到原來的大小。可以在不更改動畫持續時間的情況下完成嗎？請你幫我解決這個問題嗎？

來源

2011-09-28 KashCSS

我相信你想添加到您的類：-webkit-animation-fill-mode: both

這將導致動畫的初始關鍵幀，當你image-highlight類應用和最後的關鍵幀將繼續被立即顯示的動畫後顯示飾面。

其他值，您可以使用：

沒有 - 動畫的效果僅在定義動畫的持續時間是顯而易見的。（默認）
倒退 - 只要將動畫樣式應用於元素，就會應用動畫的初始關鍵幀。這隻會影響-webkit-animation-delay具有非零值的動畫。
轉發 - 動畫的最終關鍵幀在動畫的最終迭代完成後繼續應用。

-webkit-animation-fill-mode: forwards可能也會滿足您的需求。

來源

2011-09-28 16:49:21 skyline3000

非常感謝。它解決了這個問題。 – KashCSS

幫了我很多，謝謝！ –

WebKit規模轉換問題

回答

相關問題