CSS @keyframe animation easy-out

Question

Ich versuche eine Animation zu erleichtern, um die ursprünglichen Werte des Elements nach dem Schweben aus zu machen. Die Animation selbst funktioniert gut, aber wenn ich schwebe von dem Element, es kehrt in den ursprünglichen Zustand sofort zurück, während ich gerne eine 0,2s Leichtigkeit haben würde. Irgendeine Hilfe?

Hier ist mein Code:

img.footer { 
     filter: grayscale(1); 
     -webkit-filter: grayscale(1); 
     animation-timing-function: ease-out; /*this is what i have tried*/ 
     -webkit-animation-timing-function: ease-out; /*this is what i have tried*/ 
    } 
    @keyframes flash { 
     0% { 
      filter: grayscale(1); 
      -webkit-filter: grayscale(1); 
     } 
     6% { 
      filter: grayscale(0) brightness(1.2); 
      -webkit-filter: grayscale(0) brightness(1.2); 
     } 
     33%, 100% { 
      filter: grayscale(0) brightness(1); 
      -webkit-filter: grayscale(0) brightness(1); 
     } 
    } 
    img.footer:hover { 
     animation-name: flash; 
     animation-duration: 0.999s; 
     animation-fill-mode: forwards; 
     animation-timing-function: ease-out; /*this is what i have tried*/ 
     -webkit-animation-timing-function: ease-out; /*this is what i have tried*/ 
    } 

Working sample

Answer 1

Ein Ansatz ist es mit nur Übergangseffekte für die Start- und End-Staaten gelten, in dem die nicht-Hover CSS ist der gewünschte Ausgangszustand und Übergang von Hover:

img.footer { 
    filter: grayscale(1); 
    -webkit-filter: grayscale(1); 
    -moz-transition:all 0.2s ease; 
    -webkit-transition:all 0.2s ease; 
    -ms-transition:all 0.2s ease; 
    -o-transition:all 0.2s ease; 
    transition:all 0.2s ease; 
} 
img.footer:hover { 
    filter: grayscale(0) brightness(1.2); 
    -webkit-filter: grayscale(0) brightness(1.2); 
    -moz-transition:all 0.999s ease; 
    -webkit-transition:all 0.999s ease; 
    -ms-transition:all 0.999s ease; 
    -o-transition:all 0.999s ease; 
    transition:all 0.999s ease; 
} 

Der einzige Nachteil dieses Ansatzes ist, dass Sie nicht die Zwischengraustufen oder Helligkeitswerte angeben können (wenn Sie eine nicht wollen linearer Übergang).