CSS关键帧动画

Question

我需要一些关于CSS动画的帮助。说我有下面的动画

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

这工作，当我在它悬停，但是当我做鼠标离开我希望我的动画在相反的方向，即第一回不透明度到1，然后才使留在0感谢提前

Answer 1

您可以使用用途：

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

工作plunker

@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 
}