左→右と上→下の位置の間のCSSの遷移

Question

left: 0pxからright: 0pxに設定された位置の間でCSSトランジションを使用してアニメーションを行うことができますか？私は上から下まで同じことを達成する必要があります。画面の幅/オブジェクトのサイズを計算していませんか？

#nav { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 50px; 
    height: 50px; 
    -webkit-transition: all 0.5s ease-out; 
} 

.moveto { 
    top: 0px; 
    right: 0px; 
} 

、その後、私はあなたがアニメーションの要素の幅/高さを知っている場合は（右、左、上、下、）の位置をアニメーション化してから、対応する余裕をsubstractできるjQueryの.addClass

Answer 1

を使用しています。

​.animate { 
    height: 100px; 
    width: 100px; 
    background-color: #c00; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    transition: all 1s ease; 
    position: absolute; 
    left: 0; /*or bottom, top, right*/ 
} 

そして、位置に応じて、アニメーション...

.animate.move { 
    left: 100%; /*or bottom, top, right*/ 
    margin-left: -100px; /*or bottom, top, right */ 
} 

この実装は、おそらくtransform: translate(x,y)と滑らかになりますが、それは、より理解しやすいですので、私はこのようにそれをしておこう。

デモ：http://jsfiddle.net/nKtC6/

Answer 2

これはクロムに私のために働きました。 translateの％は、適用される要素のバウンディングボックスのサイズを参照しているため、右下端に要素を完全に取得し、要素の位置を指定するプロパティを切り替える必要はありません。あなたは今calc()を使用することができます（10+ IEを含む）より近代的なブラウザで

topleft { 
    top: 0%; 
    left: 0%; 
} 
bottomright { 
    top: 100%; 
    left: 100%; 
    -webkit-transform: translate(-100%,-100%); 
} 

Answer 3

は：

.moveto { 
    top: 0px; 
    left: calc(100% - 50px); 
}