如何在懸停上創建顯示圖像動畫效果？

想要創造一種手風琴的效果，但它應該給予揭示效果，因爲我已經在JSFiddle中完成了它。但是CSS3的動畫是有問題的 - 如果仔細注意的話，圖片就會徘徊，併成爲懸停的中心。如何順利實現？如何在懸停上創建顯示圖像動畫效果？

.accordion li .accordion-img { 
    position:relative; 
    height: 100%; 
    width: 100%; 
    transition: all 0.3s; 
    overflow: hidden; 
    left: 0; 
    right: 0; 
} 
.accordion li.active .accordion-img { 
    left: -15%; 
    width: 130%; 
}

https://jsfiddle.net/sunrays/mzx7kaLd/

編輯：圖片應該沒有明顯的懸停移動。總之，我試圖讓動畫效果像第二部分https://www.airforce.com/

來源

2016-07-04 Arun Prakash

（'left'和'width'），而不是'all'你會獲得更好的表現。另外，如果你的動畫速度稍快，那麼你的動作就會減少。試試這個：https://jsfiddle.net/RoryMcCrossan/mzx7kaLd/1/ –

好點。如果我嘗試使其居中，圖像仍然生澀。例如，試着用'left：-15％;寬度：130％;'。 –

在動畫時，千萬不要使用左，頂，右，底部。它會產生小故障。相反，使用變換：翻譯屬性。

我下面的類添加的代碼只有一行，並可以立即看到的變化：如果你只適用於需要轉變

.accordion li.active .accordion-img { 
    transform: translate(-15%, 0px); 
    width: 130%; 
}

來源

2016-07-04 18:57:08 BlueBird03

我不希望圖像像https://www.airforce.com/的第2部分那樣明顯移動 –

如何在懸停上創建顯示圖像動畫效果？

回答

相關問題