CSS關鍵幀動畫

Question

我需要CSS動畫方面的幫助。 說我有以下動畫

from {left: 0; opacity: 1}
to {left: 20%; opacity: 0.8}

當我將鼠標懸停在上面時可以使用，但是當我進行鼠標離開時，我希望動畫朝相反的方向移動，即首先將不透明度恢復為1，然后再將其保持為0。

Answer 1

您可以使用use：

[selector]:not(:focus) {
    /* animation code */
}

工作塞

 @keyframes example { from {background-color: red;} to {background-color: yellow;} } @-webkit-keyframes example { from {background-color: red;} to {background-color: yellow;} } @keyframes example1 { from {background-color: yellow;} to {background-color: red;} } @-webkit-keyframes example1 { from {background-color: yellow;} to {background-color: red;} } /* The element to apply the animation to */ input { width: 100px; height: 25px; background-color: red; } input:focus{ -webkit-animation-name: example; /* Chrome, Safari, Opera */ -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ animation-name: example; animation-duration: 4s; } input:not(:focus){ -webkit-animation-name: example1; /* Chrome, Safari, Opera */ -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ animation-name: example1; animation-duration: 4s; } 

 <input type="text"/> 

Answer 2

這是您需要的嗎？

from:not(:focus) {
    left: 0; opacity: 1
}