左 - >右和頂部 - >底部位置之間的CSS過渡

是否可以使用CSS過渡在設置爲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; 
}

，然後我使用jQuery的.addClass

來源

2012-04-20 grep

那麼，*什麼*你試過嗎？你在用什麼HTML？ CSS，任何JavaScript？你有到目前爲止的[演示]（http://jsfiddle.net/）..？ – 2012-04-20 13:50:59

@David Thomas查看編輯。 – grep 2012-04-20 13:55:24

謝謝！ ...我們可以看到（相關的）HTML和jQuery嗎？ – 2012-04-20 13:56:14

如果你知道的動畫元素，你可以動畫的位置的寬度/高度（上，下，左，右），然後。減去相應的保證金。

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

來源

2012-04-20 17:32:26 Duopixel

您可能想要添加彈性緩動轉換http://stackoverflow.com/questions/23462515/elastic-easing-in-css3-best-approach – 2016-03-01 12:12:37

這爲我工作的鉻。 translate的百分比是指它所應用的元素的邊界框的大小，因此它完美地將元素到達右下邊緣，而不必切換哪個屬性用於指定它的位置。

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

來源

2013-08-29 12:58:48 teknotus

更現代的瀏覽器（包括IE 10+），你現在可以使用calc()：

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

來源

2014-11-20 18:44:25 candu

左 - >右和頂部 - >底部位置之間的CSS過渡

回答

相關問題