Css：转换效果不适用于Filter Property

Question

我正在尝试将过渡效果应用于图像。

我在图像上应用了滤镜棕褐色效果。当悬停图像棕褐色将消失。

     <ul class="sepia">

   <li class="sbr_text social-icons Forrst">
   <a target="_blank" href="http://i.snag.gy/rTYay.jpg">
      <img width="auto" height="auto" src="http://siteurl.com/facebook.png">
   </a>
  </li>

 <li class="sbr_text social-icons Forrst">
   <a target="_blank" href="http://i.snag.gy/rTYay.jpg">
      <img width="auto" height="auto" src="http://siteurl.com/facebook.png">
   </a>
 </li>

 <li class="sbr_text social-icons Forrst">
   <a target="_blank" href="http://i.snag.gy/rTYay.jpg">
      <img width="auto" height="auto" src="http://siteurl.com/facebook.png">
   </a>
  </li>
  </ul>



  <style>

   .sepia .social-icons img{ filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'old-timey\'><feColorMatrix type=\'matrix\' values=\'0.14 0.45 0.05 0 0 0.12 0.39 0.04 0 0 0.08 0.28 0.03 0 0 0 0 0 1 0\'/></filter></svg>#old-timey");
  -webkit-filter: sepia(1);-webkit-filter: sepia(100%);-moz-filter: sepia(100%);
   -ms-filter: sepia(100%);
   -o-filter: sepia(100%);
    filter: sepia(100%); 
   -webkit-transition: all ease 0.5s;
   -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -ms-transition: all ease 0.5s;
     transition: all ease 0.5s; }

  .sepia .social-icons img:hover { filter: none;
       -webkit-filter: sepia(0); -moz-filter: sepia(0);
     -ms-filter: sepia(0);
     -o-filter: sepia(0);
     filter: sepia(0);filter: sepia(0%);}

 </style>

将鼠标悬停在图像上时，悬停效果不适用。我希望显示平滑的过渡效果。

如何解决？任何人都帮我添加过渡平滑效果。！