Animação não funciona CSS3

Front-end
, ,
#1

Estou desenvolvendo uma aplicação web em jsp e gostaria de colocar uma animação nos componentes do meu menu em que eles apareciam deslisando para o lado direito , mas a animação não funciona.

Como nesse exemplo: link do exemplo

Mas ele não funciona olha como esta a minha aplicação.

Aplicação click aqui

Q8q8M

HTML

  <html>
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="js/jquery-1.12.0.min.js" type="text/javascript"></script> 

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
  </script> 
   <!-- OUTRAS BIBLIOTECAS --> 
   <script src="js/jquery.maskedinput.js" type="text/javascript"></script> 
   <script src="js/jquery.maskedinput.min.js" type="text/javascript">
   </script> 

   <link rel="stylesheet" href="css/css.css" type="text/css"> 
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 
 </head>

   <body>
  <aside id="lateral">

  <div id="lado_esquerdo_menu" class="nano">
   <ul class="nano-content">
 <li>
  <a href="index.html"><span id="home">HOME</span></a><br><br>
  </li>
  <li class="sub-menu">
   <a><i class="arrow fa fa-angle-right pull-right"></i>Camisetas</a><br><br>

  </li>
  <li class="sub-menu">
   <a><i class="arrow fa fa-angle-right pull-right"></i>Calçados</a><br><br>

  </li>
  <li class="sub-menu">
   <a><i class="arrow fa fa-angle-right pull-right"></i>Bermudas</a><br><br>

   </li>

    <li class="sub-menu">
    <a><i class="arrow fa fa-angle-right pull-right"></i>Contato</a>

   </li>

     </ul>
     </div>

   </aside>
  </body>
 </html>

CSS

.nano-content li :hover{
background-color: white;
width: 100%;
color:#00008B;
font-size: 13pt;
-webkit-animation: moveFromLeftRotate 300ms ease;
-moz-animation: moveFromLeftRotate 300ms ease;
-ms-animation: moveFromLeftRotate 300ms ease;
 }

 @-webkit-keyframes moveFromLeftRotate{
from {
    -webkit-transform: translateX(-100%) rotate(-90deg);
}
to {
    -webkit-transform: translateX(0%) rotate(0deg);
    }
}
  @-moz-keyframes moveFromLeftRotate{
from {
    -moz-transform: translateX(-100%) rotate(-90deg);
    }
to {
    -moz-transform: translateX(0%) rotate(0deg);
       }
   }
   @-ms-keyframes moveFromLeftRotate{
   from {
    -ms-transform: translateX(-100%) rotate(-90deg);
   }
to {
    -ms-transform: translateX(0%) rotate(0deg);
   }
 }

        
  .nano-content a :hover {

color:#00008B !important;
}
        .nano-content {
            margin-left: 20px;
            font-size: 11pt;
              font-family: 'css';
        }
        
         #lateral{
            float:left; 
        
            padding: 5px; 
            width: 35%; 
                height: 100%;
                overflow:auto; 
                 background-color: #00008B;
                 margin-top: 35px;
                 
        }