webkit的平移X動畫回滾到初始位置

它實際上是速度不夠快使用硬件加速平移X的唯一途徑。

我的問題是div在動畫結束時收回它的初始位置。我在左邊的按鈕上添加了slideGalLeft類cliking。以動畫的div

你可以在這裏看到一個例子，在回調事件部分： http://position-absolute.com/jqtouch/demos/main/#home

.slideGalLeft { 
    -webkit-animation-name: slideColis; 
} 


@-webkit-keyframes slideColis { 
    from { -webkit-transform: translateX(0%); } 
    to { -webkit-transform: translateX(-100%); } 
}

來源

2010-01-07 Cedric Dugas

不要使用WebKit的動畫，這是它回來一次播放的默認值。而是定義

.slideGalleft{ 
    -webkit-transition: -webkit-transform 1s linear; 
    -webkit-transform: translateX(0%); 
}

和使用Javascript，或者設置-webkit-transform: translateX(100%);或添加CSS類的元件，它設置的最終轉換值和WebKit將正確的動畫效果也

來源

2010-05-31 23:23:10

thx！這是我正在尋找 – 2010-06-02 14:38:46

你可以使用動畫填充模式來保持動畫在最後的位置（雖然你應該真的在使用轉換進行永久性的單步改變） – 2011-01-21 20:20:18

你完全正確的填充模式屬性。在我回答的時候，我不知道它。 – 2013-11-21 10:23:54

我是能夠使通過增加它的工作動畫結束時的「顯示：無」風格。使用下面的CSS：

.paused { 
    -webkit-animation-play-state: paused; 
} 

.hiddendiv { 
    display:none; 
}

然後在您的jQuery代碼：

$('div.sideimage').click(
    function() { 
     $(this).removeClass("paused").delay(2000).queue(
      function(next) {  
       $(this).addClass("hiddendiv");  
       next(); 
      } 
     ); 
    } 
);

應該努力！

來源

2011-03-08 23:28:40

Guillaume的回答非常好。但是，如果您正在尋找硬件加速，則必須讓webkit引擎知道您需要3D渲染（使硬件加速處於活動狀態）。

根據http://www.html5rocks.com/tutorials/speed/html5/#toc-hardware-accell，這是通過添加translateZ（0）到您的規則，像這樣做：

.slideGalleft{ 
    -webkit-transition: -webkit-transform 1s linear; 
    -webkit-transform: translateX(0%) translateZ(0); 
}

關注紀堯姆的意見不止於此。

來源

2011-05-29 06:21:50

用途：

-webkit-animation-fill-mode: none/backwards/forwards/both;

這允許你定義在什麼目的你的動畫當動畫完成的元素仍然存在。

來源

2012-03-26 09:42:02 hallodom

webkit的平移X動畫回滾到初始位置

回答

相關問題