2016-10-06 9 views
0

私はアニメーションスタイルを適用したビットマップを持っています。私はそれが左に移動し、イベントがトリガされると(この場合はホバー)約50%のサイズを変更したいと思います。私はスムーズに左に向かって動きを適用することができましたが、私はtransform:scaleコマンドで応答がありません。 See jsfiddle here進行中のCSSアニメーションビットマップにスケールを適用しますか?

.wheel:hover { 
    margin-left: -228px; 
    transform: scale(0.5); 
} 

私は間違っていますか?

答えて

0

アニメーションの画像にtransform:rotate()があるため動作しません。同じ画像に別のtransformを追加すると、アニメーションが動作していると同時に、

の代わりにtransform:scale(0.5)height:50%;width:autoを使用できます。それは

@keyframes spin { 
 
    from {transform:rotate(0deg);} 
 
    to {transform:rotate(360deg);} 
 
} 
 

 
.wheel { 
 
\t position: fixed; 
 
\t top: 30px; 
 
\t left: 140px; 
 
\t animation: spin 15s infinite linear; 
 
\t transition: all 0.5s linear; 
 
} 
 

 
.wheel:hover { 
 
\t margin-left: -228px; 
 
width:auto; 
 
height:50%; 
 
}
<body> 
 
    <img src="https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg" class="wheel"> 
 
</body>

+0

を助けなら、私に知らせてjsFiddle>以下またはフィドル

をスニペット参照はい、それは動作します。残念ながら、スケール法のような滑らかな遷移は失われます。奇妙なことは、Firefoxを実際に倍増*画像サイズを "50%"に設定することです。それを35%に設定することは仕事をします。どうもありがとう。 –

+0

@pacotanakaうれしいです。受け入れられたとして私の答えを評価することを忘れないでください:D –

関連する問題