轉換不透明度延遲

我想在3秒後淡出一個元素。我目前正在使用動畫來做到這一點，但我剛剛瞭解到轉換延遲，所以我相信我可以刪除動畫並通過轉換完成。這可能嗎？轉換不透明度延遲

我原來的代碼是：

.foo { 
    animation: fadeOut 3s cubic-bezier(0.645, 0.045, 0.355, 1.000) 
} 
@keyframes fadeOut { 
    80%{ 
     opacity: 1 
} 
    100% { 
     opacity: 0 
} 
}

這是我嘗試在轉變：

.announcement { 
    display: block; 
    font-size:22px; 
    transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    transition-delay :3s; 
    opacity:0; 
} 

<div class="announcement">asdasd</div>

http://jsbin.com/vejewukusi/edit?html,css,output

這是可能的，而不添加其他的CSS類？

爲了使事情更清楚，我想追加一個div與一個類，等待3秒，然後淡出，並做到這一點，而不使用關鍵幀。

來源

2015-08-15 ditto

對於要激活的過渡，您需要更改相關屬性 - 不透明度。這意味着您必須通過分配另一個類來更改不透明度，或者直接通過JS對其進行更改。 –

https://jsfiddle.net/vovf4hdg/任何想法我做錯了什麼？延遲不起作用。 – ditto

你沒有觸發轉換。添加測試類只需渲染.announcement - https://jsfiddle.net/OriDrori/vovf4hdg/7/ –

這是否解決您的問題：JSFiddle？我添加了一個動畫和一個小函數來爲不透明度設置動畫效果：

.test { 
    animation: opacity 1s; 
} 
@keyframes opacity { 
    from { opacity: 0.5; } 
    to { opacity: 1; } 
}

來源

2015-08-15 18:48:05

轉換不透明度延遲

回答

相關問題