html - transform,transform-origin not working inside @keyframes -

i want tilt image @ beginning , @ end. image keyframes,transform , transform-origin doesn't seem working.

html:

 <div class="h_imag col-md-9">           <img class="h_ig"src="top_right_image.gif" alt="">         </div> 

css:

.h_imag{   min-height: 6px;   float: right;   animation: t_bike 10s infinite; }  @-moz-keyframes t_bike { 0%    {top: 0px; left: 0px; -moz-transform: rotate(0 deg); -moz-transform-origin: -9px 15px;} 5%    {top: 0px; left: 1%; -moz-transform: rotate(-10 deg); -moz-transform-origin: 20px 0px;} 10%   {top: 0px; left: 4.6%; -moz-transform: rotate(-20 deg); -moz-transform-origin: 29px 0px;} 20%   {top: 0px; left: 9.2%; -moz-transform: rotate(-25 deg); -moz-transform-origin: 31px 0px;} 25%   {top: 0px; left: 13.8%; -moz-transform: rotate(-25 deg); -moz-transform-origin: 31px 0px;} 30%   {top: 0px; left: 18.4%; -moz-transform: rotate(-30 deg); -moz-transform-origin: 31px 0px;} 35%   {top: 0px; left: 23%; -moz-transform: rotate(-30 deg); -moz-transform-origin: 31px 0px;} 40%   {top: 0px; left: 27.6%; -moz-transform: rotate(-30 deg); -moz-transform-origin: 31px 0px;} 45%   {top: 0px; left: 32.2%; -moz-transform: rotate(-25 deg); -moz-transform-origin: 31px 0px;} 50%   {top: 0px; left: 36.8%; -moz-transform: rotate(-20 deg); -moz-transform-origin: 31px 0px;} 55%   {top: 0px; left: 41.4%; -moz-transform: rotate(0 deg); -moz-transform-origin: 31px 0px;} 60%   {top: 0px; left: 46%; -moz-transform: rotate(0 deg); -moz-transform-origin: 31px 0px;} 65%   {top: 0px; left: 50.6%; -moz-transform: rotate(0 deg); -moz-transform-origin: 31px 0px;} 70%   {top: 0px; left: 55.2%; -moz-transform: rotate(20 deg); -moz-transform-origin: 70px 0px;} 75%   {top: 0px; left: 59.8%; -moz-transform: rotate(25 deg); -moz-transform-origin: 70px 0px;} 80%   {top: 0px; left: 64.4%; -moz-transform: rotate(30 deg); -moz-transform-origin: 65px 0px;} 85%   {top: 0px; left: 69%; -moz-transform: rotate(30 deg); -moz-transform-origin: 65px 0px;} 90%   {top: 0px; left: 73.6%; -moz-transform: rotate(30 deg); -moz-transform-origin: 65px 0px;} 95%   {top: 0px; left: 78.2%; -moz-transform: rotate(10 deg); -moz-transform-origin: 75px 0px;} 100%   {top: 0px; left: 88%; -moz-transform: rotate(0 deg); -moz-transform-origin: -9px 15px;} } 

the major issue space have in 0 deg, should not space there, between number , deg characters.

if plan run on modern browsers, need none prefixed version too.

also, since top value not changed, moved h_imag rule , added position: relative; left work.

.h_imag{    position: relative;    top: 0;    min-height: 6px;    float: right;    animation: t_bike 10s infinite;  }    @keyframes t_bike {  0%    { left: 0px; transform: rotate(0deg); transform-origin: -9px 15px; }  5%    { left: 1%; transform: rotate(-10deg); transform-origin: 20px 0px; }  10%   { left: 4.6%; transform: rotate(-20deg); transform-origin: 29px 0px; }  20%   { left: 9.2%; transform: rotate(-25deg); transform-origin: 31px 0px; }  25%   { left: 13.8%; transform: rotate(-25deg); transform-origin: 31px 0px; }  30%   { left: 18.4%; transform: rotate(-30deg); transform-origin: 31px 0px; }  35%   { left: 23%; transform: rotate(-30deg); transform-origin: 31px 0px; }  40%   { left: 27.6%; transform: rotate(-30deg); transform-origin: 31px 0px; }  45%   { left: 32.2%; transform: rotate(-25deg); transform-origin: 31px 0px; }  50%   { left: 36.8%; transform: rotate(-20deg); transform-origin: 31px 0px; }  55%   { left: 41.4%; transform: rotate(0deg); transform-origin: 31px 0px; }  60%   { left: 46%; transform: rotate(0deg); transform-origin: 31px 0px; }   65%   { left: 50.6%; transform: rotate(0deg); transform-origin: 31px 0px; }  70%   { left: 55.2%; transform: rotate(20deg); transform-origin: 70px 0px; }  75%   { left: 59.8%; transform: rotate(25deg); transform-origin: 70px 0px; }  80%   { left: 64.4%; transform: rotate(30deg); transform-origin: 65px 0px; }  85%   { left: 69%; transform: rotate(30deg); transform-origin: 65px 0px; }  90%   { left: 73.6%; transform: rotate(30deg); transform-origin: 65px 0px; }  95%   { left: 78.2%; transform: rotate(10deg); transform-origin: 75px 0px; }  100%  { left: 88%; transform: rotate(0deg); transform-origin: -9px 15px; }  }

<div class="h_imag col-md-9">    <img class="h_ig" src="http://placehold.it/150" alt="">  </div>