@keyframes的雙向動畫

我正在創建一個自定義照片庫，並且突然遇到了這個問題。如果您創建@keyframes動畫，則無法以相反的方式播放。@keyframes的雙向動畫

例如：您有一個動畫，它通過scale（）擴大了正方形。如果你將它懸停在方塊上，它會平滑地放大，但如果你將鼠標移出去，你的方塊會在沒有動畫的情況下彈回。

有沒有辦法在後退路線上反轉動畫？在我的情況下，轉換不能正常工作。謝謝。

2016-09-18 MaxelRus

如果你想放大和圖像，你不需要使用@keyframes來製作動畫。你盤旋在它時只是使圖像尺度，使其慢慢秤使用CSS轉換，例如：

img:hover { 
     transform: scale(2); 
    } 

    img { 
     transition: all 1s; 
    }

來源

2016-09-18 14:24:36

廣場就是一個例子。我有更復雜的情況。而且，正如我所說的，我不需要過渡。 – MaxelRus

我真的不知道你到底面臨着什麼樣的情況。但是，有一個名爲** animation-direction **的CSS屬性，它可以接受** reverse **作爲值。我希望你能找到它有幫助。 –

.image{ 
     margin:400px; 
     padding-top:5px; 
     overflow:hidden; 
     transition-duration:0.9s; 
     transition-property:transform; 
     } 
.image:hover{ 
     transform:scale(2.5); 
    }

<img class="image" src="download.jpg" alt="a" />

來源

2016-09-18 14:24:45

@keyframes的雙向動畫

回答

相關問題