變換動畫

我剛剛發現瞭如何使用transform屬性來動畫元素（看起來很神奇！）。儘管如此，我在緩解部分遇到了一些麻煩。就像當我將鼠標從元件上取下時，它會瞬間回落到原始狀態 - 如果可能，我希望在相同的動畫時間後退。變換動畫

代碼：

<div class="transform-box"> 
</div> 

.transform-box:hover { 
animation: raise 2s; } 

@keyframes raise { 
0% { 
transform: translateY(0); } 

100% { 
transform: translateY(-150px); } 
}

我是不是該做的正確方法？或者我應該使用不同的屬性，如果我想要一個相等的動畫時間，並且它正在回退？

編輯：這裏是一個例子：https://www.lonelyplanet.com/france/paris - 滾動到第二部分，它說'在巴黎的頂級體驗 - 這是可以實現的只有CSS或它需要使用Javascript？

我看着可能出現的重複問題，看起來答案只有一半 - 它可以將動畫時間管理回原始狀態，但是如果鼠標從對象上移開，它就會跳回來。

感謝，

Reskk

來源

2016-10-13 Reskk

的可能的複製[CSS3：反向動畫上懸停後除小鼠（http://stackoverflow.com/questions/16516793/css3-reverse-animation-on-mouse-out-after-hover） – Dekel

剛看了看，看來，雖然解決方案很好，但只有一半。由於它似乎取消了緩出屬性，如果一個人的鼠標離開物體。 – Reskk

這可以在不JS來實現。

.transform-box { 
    float:left; 
    transition: 2s ease-in-out; 
} 

.transform-box:hover { 
    transform: translateY(-20px); 
} 

<div class="transform-box"> 
    <img src="https://lonelyplanetimages.imgix.net/mastheads/GettyImages-546212251_medium.jpg" width="300px"> 
</div>

看看這個頁面。 http://www.the-art-of-web.com/css/css-animation/

來源

2016-10-13 02:51:27 RSSM

回答

相關問題