14

私はCSS変換/アニメーションをfont-face（twitter bootstrap / font-awesome）で使用して、スピナーgifのようなアイコンを生成しています。

問題は、アイコンが360度回転するときにアイコンがぐらつくことです。このJSFiddleを参照して、私が何を意味するかを確認してください。ぐらつかないようにする方法を知っている人はいますか？または、少なくとももう少しスムーズに回転させますか？

以下にそのためのコードを示します。

CSS：

i.icon-repeat {
  -webkit-animation: Rotate 500ms infinite linear;
  -moz-animation: Rotate 500ms infinite linear;
  -ms-animation: Rotate 500ms infinite linear;
  -o-animation: Rotate 500ms infinite linear;
  animation: Rotate 500ms infinite linear;
}
@-o-keyframes Rotate {
  from {-o-transform:rotate(0deg);}
  to {-o-transform:rotate(360deg);}
}
@-moz-keyframes Rotate {
 from {-moz-transform:rotate(0deg);}
 to {-moz-transform:rotate(360deg);}
}
@-ms-keyframes Rotate {
  from {-ms-transform:rotate(0deg);}
  to {-ms-transform:rotate(360deg);}
}
@-webkit-keyframes Rotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(360deg);}
}
@keyframes Rotate {
  from { transform:rotate(0deg);}
  to { transform:rotate(360deg);}
}
#iconRepeatMain{
  display: inline-block;    
  position: absolute;
  z-index:10007;
  left: 50%;
  top: 50%;
  margin-left: -24px; /* -1 * image width / 2 */
  margin-top: -24px;  /* -1 * image height / 2 */
  font-size:36px;
}​

HTML：

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
<i id='iconRepeatMain' class='icon-repeat' style='font-size:36px; color:red'></i>​

注：誰かが自分のWebアプリでこのコードを使用したい場合は、必要なアクションが完了したら、必ずこのスピナーをDOMから削除してください。このアイコンをバックグラウンドで回転させ続けると、信じられないようなブラウザに関係なくCPUが消費されます。また、単にその可視性を切り替える、つまり、display:noneは機能しません。次のように、DOMから削除する必要があります。$('#iconRepeatMain').remove();

4

4 に答える 4

16

デフォルトでは、CSS はプロパティを使用して垂直方向と水平方向の中心について物事を変換しますtransform-origin。このデフォルト値の簡略構文は です50% 50%。これは、原点の x 値と y 値を表します。

このアイコンでは、y 原点を 38% にシフトすると少し滑らかになることがわかりましたが、正確な値を取得するには、いじる必要があります。JSFiddleで見る

i.icon-repeat {
  -webkit-transform-origin:50% 38%;
  -moz-transform-origin:50% 38%;
  -ms-transform-origin:50% 38%;
  -o-transform-origin:50% 38%;
  transform-origin: 50% 38%;
}

プロパティの詳細については、プロパティに関する MDN の記事transform-originをお勧めします。

于 2012-12-19T19:17:56.247 に答える
4

要素に特定の高さと幅を設定してみてください。試行錯誤の結果、以下を追加することがわかりました。

#iconRepeatMain {
    width: 26px;
    height: 19px;
}

フォントをかなりうまく中央に配置し、ぐらつきをなくしているようです。ただし、これは使用しているブラウザに依存する可能性があります。十分にテストしてください。

http://jsfiddle.net/mblase75/pGhFX/13/

于 2012-12-19T19:12:16.100 に答える