+遷移がジャンプやぼやけコンテンツCSS

Question

原因となるのは、フィドルを見てみましょう変換：http://jsfiddle.net/r1kw37g5/

.grid-item .diamond .inner-diamond{ 
    -webkit-transform: rotate(45deg); 
     -ms-transform: rotate(45deg); 
     -o-transform: rotate(45deg); 
      transform: rotate(45deg); 
    width: 394px; 
    height: 394px; 
    position: relative; 
    top: -23%; 
    left: -23%; 
} 

状況は、私は、ダイヤモンド形のグリッドを作成しています。 このグリッドには、-45度回転した要素と、その内部のコンテナが45度回転して内容がまっすぐになります。 （コンテンツはホバリングに表示されます）

その中には、単純なアニメーションのボタンがあります。ここに問題が始まります。ボタンの上にマウスを置くと、アニメーションが終了するまでしばらくの間他のコンテンツがぼやけてしまい、右に1pxジャンプします。

私は試みました：コンテナにtranslateZ（0）を入れてジャンプをやめないようにしました。それは動作しますが、コンテンツは常にぼやけてしまいます。私はズームとスケールの組み合わせpreserve3dとフォントスムージングとぼやけたコンテンツを戦うために努力しているが、これまで運がない。

質問は誰も私がジャンプせずに、他のコンテンツがぼやけなくなることなくボタンをアニメーション化する方法を知っていますか？

Answer 1

は私がtransformの要素の外側のテキストをもらおう

アニメーション（CSS transition effect makes image blurry/moves image 1px, in Chrome?）でいくつかの問題があるようです。

1. は
2. が.inner-diamond

使用にpointer-events:noneを設定する（.diamond-contentのopacity:0を削除する）それをopacity: 0を与え、.diamondの兄弟であることをご.button

.diamond内を移動 .inner-diamondを置きますそれを実現する兄弟方法

.diamond:hover + .inner-diamond { 
    opacity: 1 
} 

迅速なデモ（レイアウトきれいではありません）：デベロッパーツールでアニメーション中のテキストの変更の不透明度/色場合 http://jsfiddle.net/r1kw37g5/6/