如何反轉延遲動畫？

Question

JS Fiddle

我有一個正方形，在懸停它下移10px然後旋轉。當離開懸停時，我希望它旋轉回來，然後回到0px。

不幸的是，它不會以相反的順序做動畫。

所以應該，懸停：

1. 移動10px的下降。
2. 旋轉45度。

和關閉懸停：

1. 轉回到0度。
2. 回到原來的位置0px;

代碼：

div{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background: blue; 
 
    top: 0; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    transition: top 0.3s ease; 
 
    transition: transform 0.3s 0.3s ease; 
 
} 
 

 
div:hover{ 
 
    top: 10px; 
 
    transform: rotate(45deg); 
 
}

<div> 
 

 
</div>

Answer 1

你有2個個小問題，你的代碼，第一個是你設置transition兩次。在這種情況下，第二個會簡單地覆蓋第一個。簡單的修正：逗號分隔的列表：

transform top 0.3s ease, 0.3s 0.3s ease; 

現在，爲扭轉該動畫的播放順序 - 我們會想要做的是設置基於我們正在朝哪個方向的轉換不同的順序。如果我們在我們的懸停狀態，我們總是希望能夠前進，否則相反：

div{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background: blue; 
 
    top: 0; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    transition: transform 0.3s ease, top 0.3s 0.3s ease; 
 
} 
 

 
div:hover{ 
 
    top: 10px; 
 
    transform: rotate(45deg); 
 
    transition: transform 0.3s 0.3s ease, top 0.3s ease; 
 
}

<div></div>

Answer 2

這是你想要的

DEMO HERE

CSS

div{ 
    width: 100px; 
    height: 100px; 
    background: blue; 
    top: 0; 
    cursor: pointer; 
    position: absolute; 
    transition: transform 0.3s ease, top 0.3s 0.3s ease; 
} 

div:hover{ 
    top: 10px; 
    transform: rotate(45deg); 
    transition: top 0.3s ease, transform 0.3s 0.3s ease; 

} 

https://jsfiddle.net/luispa/7gom9bhr/3/