CSS @keyframe 애니메이션 용이함

Question

호버 해제 후 요소의 원래 값으로 애니메이션을 쉽게 만들려고합니다. 애니메이션 그 자체는 괜찮습니다. 하지만 요소를 가져 가면 원래 상태 인 으로 즉각적으로으로 되돌아갑니다. 반면에은 0.230 입니다. 어떤 도움이 필요합니까?

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

한 가지 방법은 비 호버 CSS를 원하는 초기 상태 및 전환되는 시작과 끝 상태, 단지 전환 효과를 적용하는 것입니다 : 여기

내 코드입니다 호버에서 :

는

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

이 방법의 유일한주의해야 할 점은 당신이 원하지 않는 경우 (중간 그레이 스케일 밝기 값을 지정할 수 없다 선형 전이).