CSS-動畫過渡效果的窗格

我在做一個網站，幾個窗格的任意號碼，導航菜單在它們之間進行切換。我想在CSS中使用轉換效果來爲窗格切換設置動畫效果。窗格是<李>元素：CSS-動畫過渡效果的窗格

<ol class="content"> 
    <li class="pane">This is pane 1.</li> 
    <li class="pane">This is pane 2.</li> 
    <li class="pane">This is pane 3.</li> 
</ol>

，其位於並排的一面，所以我的動畫內容的利潤率左屬性使窗格左右滾動，流入和流出的查看：

@-webkit-keyframes scroll1to2 { 
    from {margin-left: 0%;} 
    to {margin-left: -100%;} 
} 

@-webkit-keyframes scroll2to3 { 
    from {margin-left: -100%;} 
    to {margin-left: -200%;} 
} 

@-webkit-keyframes scroll1to3 { 
    from {margin-left: 0%;} 
    to {margin-left: -200%;} 
}

，這當然可以顛倒。問題是，這種方法將是不實用超過3個窗格（代碼的長度與窗格的數平方增長）。

所以...你怎麼會寫這樣的窗格的任意號碼？

編輯：我知道我可以使用JavaScript來生成CSS代碼，但我希望有，我已經錯過了一個更優雅的方式。

來源

2012-05-21 tanis.control

我不知道，如果你是使用這個關鍵幀死心塌地 - 而關鍵幀允許更高級的動畫，您的特定滑動例如可以用一個簡單的CSS過渡來實現。

.content{ 
    -webkit-transition:margin-left 1s ease-in-out; 
    transition:margin-left 1s ease-in-out; 
}

這條規則說，內容塊將使用1秒的寬鬆過渡隨時margin-left屬性改變，這你可以在JavaScript中，每當用戶導航做。

您可以瞭解更多關於webkit blog CSS過渡。

來源

2012-05-21 03:57:09

CSS-動畫過渡效果的窗格

回答

相關問題