変換、変換元が@keyframes内で動作しない

Question

最初と最後に画像を傾けたい。画像のキーフレーム、変換、変換元が機能していないようです。

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;} 
} 

Answer 1

、それはそれがすべてで実行されていないことを意味します。

問題はh_imagの通常のCSSであると思います。これに

animation: t_bike 10s infinite; 

：この

変更

-moz-animation: t_bike 10s infinite; 

Answer 2

主要な問題は、あなたが0 degに持っているスペースでは、数とdeg文字の間に、そこのスペースであってはなりません。

最近のすべてのブラウザでこれを実行する場合は、プレフィックスなしのバージョンも必要です。

また、上限値が変更されていないため、ルールをh_imagルールに移動し、leftを追加すると、position: relative;が追加されました。

.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>

Answer 3

あなたは、回転数と回転部の一例90 degの間にスペースを持っています。これらのspcaesを削除します。また、トランスフォームのプロパティにプレフィックスを追加し、クロスブラウザ互換のためにキーフレームを追加します。

.h_imag{ 
 
    min-height: 6px; 
 
    float: right; 
 
    animation: t_bike 10s infinite; 
 
} 
 

 
@-moz-keyframes t_bike { 
 
0% {top: 0px; left: 0px; -moz-transform: rotate(0deg); -moz-transform-origin: -9px 15px;} 
 
5% {top: 0px; left: 1%; -moz-transform: rotate(-10deg); -moz-transform-origin: 20px 0px;} 
 
10% {top: 0px; left: 4.6%; -moz-transform: rotate(-20deg); -moz-transform-origin: 29px 0px;} 
 
20% {top: 0px; left: 9.2%; -moz-transform: rotate(-25deg); -moz-transform-origin: 31px 0px;} 
 
25% {top: 0px; left: 13.8%; -moz-transform: rotate(-25deg); -moz-transform-origin: 31px 0px;} 
 
30% {top: 0px; left: 18.4%; -moz-transform: rotate(-30deg); -moz-transform-origin: 31px 0px;} 
 
35% {top: 0px; left: 23%; -moz-transform: rotate(-30deg); -moz-transform-origin: 31px 0px;} 
 
40% {top: 0px; left: 27.6%; -moz-transform: rotate(-30deg); -moz-transform-origin: 31px 0px;} 
 
45% {top: 0px; left: 32.2%; -moz-transform: rotate(-25deg); -moz-transform-origin: 31px 0px;} 
 
50% {top: 0px; left: 36.8%; -moz-transform: rotate(-20deg); -moz-transform-origin: 31px 0px;} 
 
55% {top: 0px; left: 41.4%; -moz-transform: rotate(0deg); -moz-transform-origin: 31px 0px;} 
 
60% {top: 0px; left: 46%; -moz-transform: rotate(0deg); -moz-transform-origin: 31px 0px;} 
 
65% {top: 0px; left: 50.6%; -moz-transform: rotate(0deg); -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(25deg); -moz-transform-origin: 70px 0px;} 
 
80% {top: 0px; left: 64.4%; -moz-transform: rotate(30deg); -moz-transform-origin: 65px 0px;} 
 
85% {top: 0px; left: 69%; -moz-transform: rotate(30deg); -moz-transform-origin: 65px 0px;} 
 
90% {top: 0px; left: 73.6%; -moz-transform: rotate(30deg); -moz-transform-origin: 65px 0px;} 
 
95% {top: 0px; left: 78.2%; -moz-transform: rotate(10deg); -moz-transform-origin: 75px 0px;} 
 
100% {top: 0px; left: 88%; -moz-transform: rotate(0deg); -moz-transform-origin: -9px 15px;} 
 
}

<div class="h_imag col-md-9"> 
 
      <img class="h_ig"src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjKEpedzfPj_kXxRz3OIoNsVzWrLJWsr6xzN-gjYYUxfvbCsOXBg" alt=""> 
 
     </div>