我知道我不能displaynone和block之間轉換，但我認爲我可以做一些跨動畫由這樣做：是否使用關鍵幀顯示CSS屬性的動畫效果？

li:nth-child(1) { 
 
    -webkit-animation: winkle 1s linear; 
 
    animation: winkle 1s linear; 
 
} 
 
li:nth-child(2) { 
 
    -webkit-animation: winkle 1s linear 1s; 
 
    animation: winkle 1s linear 1s; 
 
} 
 
li:nth-child(3) { 
 
    -webkit-animation: winkle 1s linear 2s; 
 
    animation: winkle 1s linear 2s; 
 
} 
 
li:nth-child(4) { 
 
    -webkit-animation: winkle 1s linear 3s; 
 
    animation: winkle 1s linear 3s; 
 
} 
 
li:nth-child(5) { 
 
    -webkit-animation: winkle 1s linear 4s; 
 
    animation: winkle 1s linear 4s; 
 
} 
 
@-webkit-keyframes winkle { 
 
    0%, 100% { 
 
    display: none; 
 
    } 
 
    1%, 
 
    99% { 
 
    display: block 
 
    } 
 
} 
 
@keyframes winkle { 
 
    0%, 100% { 
 
    display: none; 
 
    } 
 
    1%, 
 
    99% { 
 
    display: block 
 
    } 
 
}

<ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
</ul>

但實際上這是不工作。你能證實這是不可能的嗎？還有其他解決方案嗎？我想到了這一點，但它也不起作用。如果你能想出更好的東西，將不勝感激。

li:nth-child(1) { 
 
    -webkit-animation: winkle 1s linear; 
 
    animation: winkle 1s linear; 
 
} 
 
li:nth-child(2) { 
 
    -webkit-animation: winkle 1s linear 1s; 
 
    animation: winkle 1s linear 1s; 
 
} 
 
li:nth-child(3) { 
 
    -webkit-animation: winkle 1s linear 2s; 
 
    animation: winkle 1s linear 2s; 
 
} 
 
li:nth-child(4) { 
 
    -webkit-animation: winkle 1s linear 3s; 
 
    animation: winkle 1s linear 3s; 
 
} 
 
li:nth-child(5) { 
 
    -webkit-animation: winkle 1s linear 4s; 
 
    animation: winkle 1s linear 4s; 
 
} 
 
li { 
 
    overflow: hidden; 
 
} 
 
@-webkit-keyframes winkle { 
 
    0%, 100% { 
 
    height: 0; 
 
    color: red; 
 
    } 
 
    1%, 
 
    99% { 
 
    height: auto; 
 
    color: blue; 
 
    } 
 
} 
 
@keyframes winkle { 
 
    0%, 100% { 
 
    height: 0; 
 
    color: red; 
 
    } 
 
    1%, 
 
    99% { 
 
    height: auto; 
 
    color: blue; 
 
    } 
 
}

<ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
</ul>

來源

2015-10-30 Vandervals

這是正確的，你不能創建一些不存在的東西。所以，你必須用另外一種方式來隱藏這個元素，如高度或混濁，看這如看到的差異：

溫克爾與身高

這個例子挖角的李但名單會移動，因爲高度變化。

li:nth-child(1) { 
 
    -webkit-animation: winkle 1s linear; 
 
    animation: winkle 1s linear; 
 
} 
 
li:nth-child(2) { 
 
    -webkit-animation: winkle 1s linear 1s; 
 
    animation: winkle 1s linear 1s; 
 
} 
 
li:nth-child(3) { 
 
    -webkit-animation: winkle 1s linear 2s; 
 
    animation: winkle 1s linear 2s; 
 
} 
 
li:nth-child(4) { 
 
    -webkit-animation: winkle 1s linear 3s; 
 
    animation: winkle 1s linear 3s; 
 
} 
 
li:nth-child(5) { 
 
    -webkit-animation: winkle 1s linear 4s; 
 
    animation: winkle 1s linear 4s; 
 
} 
 
@-webkit-keyframes winkle { 
 
    0%, 100% { 
 
    height:0; 
 
    } 
 
    1%, 
 
    99% { 
 
    height:20px; 
 
    } 
 
} 
 
@keyframes winkle { 
 
    0%, 100% { 
 
    height:0; 
 
    } 
 
    1%, 
 
    99% { 
 
    height:20px; 
 
    } 
 
}

<ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
</ul>

溫克爾與透明度

這個例子挖角的李但列表保持原始高度。

li:nth-child(1) { 
 
    -webkit-animation: winkle 1s linear; 
 
    animation: winkle 1s linear; 
 
} 
 
li:nth-child(2) { 
 
    -webkit-animation: winkle 1s linear 1s; 
 
    animation: winkle 1s linear 1s; 
 
} 
 
li:nth-child(3) { 
 
    -webkit-animation: winkle 1s linear 2s; 
 
    animation: winkle 1s linear 2s; 
 
} 
 
li:nth-child(4) { 
 
    -webkit-animation: winkle 1s linear 3s; 
 
    animation: winkle 1s linear 3s; 
 
} 
 
li:nth-child(5) { 
 
    -webkit-animation: winkle 1s linear 4s; 
 
    animation: winkle 1s linear 4s; 
 
} 
 
@-webkit-keyframes winkle { 
 
    0%, 100% { 
 
    opacity:0; 
 
    } 
 
    1%, 
 
    99% { 
 
    opacity:1; 
 
    } 
 
} 
 
@keyframes winkle { 
 
    0%, 100% { 
 
    opacity:0; 
 
    } 
 
    1%, 
 
    99% { 
 
    opacity:1; 
 
    } 
 
}

<ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
</ul>

來源

2015-10-30 14:16:18

不，事實並非如此。

不可動畫的屬性不是可動畫的時期。

display: none和display: block之間沒有任何狀態（因爲在height: 0和height: 500px之間），所以您不能在它們之間進行動畫製作。

來源

2015-10-30 14:02:19 Quentin

高度呢？高度是可以動畫的！ – Vandervals

可以將高度設置爲動畫（固定值，不自動），但不顯示。 – Quentin

但在第二個例子中，它也不起作用！ – Vandervals

CSS動畫和過渡通過創建兩個數值之間的步驟工作，例如：

height: 0px -> height: 100px;

在這種情況下，給定的步驟，並定時的量，瀏覽器可以計算兩個值之間的轉換。這歸結爲數學。

在另一方面，非數字的CSS屬性只有2種可能的狀態（開/關），並且因此不能有任何「其間」步驟：

display: none -> display: block;

所有CSS化子性質可被用一個動畫或轉換，只要考慮到這個值可以採用兩個值之間的漸進式步驟。

來源

2015-10-30 14:22:28 leuquim

是否使用關鍵幀顯示CSS屬性的動畫效果？

回答

溫克爾與身高

溫克爾與透明度

相關問題