При наведении на кнопку заливать фон слева направо в течении двух секунд

<style>
.animated {
  -webkit-transition: all 2s ease-in;
  -ms-transition: all 2s ease-in;
  -o-transition: all 2s ease-in;
  -moz-transition: all 2s ease-in;
  transition: all 2s ease-in; 
    border: 1px solid black;
    background: none;
border: 2px solid #fff;
-moz-border-radius: 2px;
border-radius: 2px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 12px;
font-family: Corkiregular;
height: 60px;
letter-spacing: 2px;
line-height: 60px;
outline: none;
padding: 0 13px 0 25px;
position: relative;
text-transform: uppercase;
}
    .animated:hover{
   background-color:#000;   
    }
</style>

width:200px;

 .buttonanim {
  border: 1px solid black;
    background: none;
border: 2px solid #fff;
-moz-border-radius: 2px;
border-radius: 2px;
color: blue;
cursor: pointer;
display: inline-block;
font-size: 12px;
height: 60px;
letter-spacing: 2px;
line-height: 60px;
width:200px;
outline: none;
/*padding: 0 13px 0 25px;*/
position: relative;
text-transform: uppercase;
    z-index:1;
   }
span{
    position:absolute;
}
   .buttonanim:hover::before{
    width: 100%;color:#000;
   }
   .buttonanim::before{
    transition-timing-function: linear;
    transition-duration: 250ms;
    content: '';
    z-index:0;
    position: absolute; /* Абсолютное позиционирование */
    height: 100%; width: 0;
    background: #fff; /* Фон */
color:#000;
 
   }