hoverで残像が残る心地いいアニメーション～hover fading navigation bar～

hover fading navigation bar

See the Pen hover fading navigation bar by Em Weisiger (@emweisiger) on CodePen.

マウスポインターを乗せると背景が変化し、離すとアニメーションしながら消えていくhoverを使ったアニメーションです。
これは簡単に実装することが出来ます

li a{
 display: block;
 width: 196px;
 padding: 3px 4px;
 margin: 5px 13px;
 color: #969E8D;
 border-bottom: 1px solid #96BF1F;
 -moz-transition: background-color .3s ease-in;
 -webkit-transition: background-color .3s ease-in;
 -o-transition: background-color .3s ease-in;
 transition: background-color .3s ease-in;
}
 
li a:hover{
 background-color: #96C11F;
 color: #fff;
 -moz-transition: background-color 0.01s;
 -webkit-transition: background-color 0.01s;
 -o-transition: background-color 0.01s;
 transition: background-color 0.01s;
}

色やサイズは好きなモノにするとして、 a と a：hover に transition をそれぞれ付けてやるだけです
transition のところをコピペして、やるだけでOKです