遅延アニメーションをどのように元に戻すことができますか？

Question

JS Fiddle

私は正方形を持っています。ホバリングすると、10ピクセル下に移動してから回転します。ホバリングから降りるとき、私はそれが戻って回転することを望みます、そして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を設定することです。この場合、2番目の文字は最初の文字を上書きします。簡単な修正：カンマ区切りのリスト：アニメーションを再生する順番逆転させるためとして今

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/