[CSS] animation을 이용해 hover시 배경색 변경하기

마우스를 올렸을때 animation 을 이용하면, 서서히 배경색이 바뀌는 방법은 덜 까다롭지만,위에서 부터 아래 방향으로 바뀌는 방법은 상대적으로 까다롭더라구요.그래서 코드도 정리할 겸, 포스팅을 하게되었습니다.가상선택자 :before 과 animation 을 이용했습니다.
코드는 아래와 같습니다.








keyframes과 animation 프로퍼티들은  ie 10버전 부터 적용됩니다.