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
}