Animation stops working when its code is placed in a separate (shared) CSS file, why?

Question

css

The animation works in the site page file, i.e. in style type = "text-css" and when I transfer it completely to a common separate css file,
CSS does not work

.area img{ width:55px; height:33px;position: absolute;z-index:99;}
 .area{z-index:99;
 position:absolute;
 animation: mymove 100s infinite; 
 -moz-animation: mymove 100s infinite; /* Firefox */ 
 -webkit-animation: mymove 100s infinite; /*Safari и Chrome*/ 
 } 
 
 @keyframes mymove { 
   0% { top:45px; left: 20px;} 
  2% { top:75px; left: 80px;} 
  50% { top:655px; left: 1470px;} 
  100% { top:45px; left: 20px;} 
  } 
 @-moz-keyframes mymove { 
  0% { top:45px; left: 20px;} 
  2% { top:75px; left: 80px;} 
  50% { top:655px; left: 1470px;} 
  100% { top:45px; left: 20px;} 
 } 
 
@-webkit-keyframes mymove { 
   0% { top:45px; left: 20px;} 
  2% { top:75px; left: 80px;} 
  50% { top:655px; left: 1470px;} 
  100% { top:45px; left: 20px;} 
 }

HTML
<div class="area"><img src="img/3.gif"></div>
Percentages more I just simplified the code.