.item { opacity: 0; transition: opacity 6s;}我使用 JS 將不透明度從 0 設(shè)置為 1，反之亦然。CSS中有沒有一種方法可以使不透明度在最后6秒從0到1過渡，但在最后0秒從1到0過渡？我想我可以在 JS 中設(shè)置轉(zhuǎn)換屬性，但是有沒有辦法用 CSS 產(chǎn)生這種行為？
2 回答
元芳怎么了
TA貢獻1798條經(jīng)驗 獲得超7個贊
在兩個不同的類中使用過渡屬性，您將在其中設(shè)置不同的不透明度。
.itemHidden {
opacity: 0;
transition: opacity 6s;
}
.itemShown {
opacity: 1;
transition: opacity 0s;
}
料青山看我應(yīng)如是
TA貢獻1772條經(jīng)驗 獲得超8個贊
我喜歡維杰的回答，因為它更短更甜蜜。但是，我認為值得一看的是如何使用關(guān)鍵幀創(chuàng)建動畫，因為其中一條評論中也提到了這一點。使用關(guān)鍵幀的示例如下：
.item {
animation-name: demo-animation;
animation-duration: 6s;
}
@keyframes demo-animation
{
25% {
opacity: .25;
}
50% {
opacity: .5;
}
75% {
opacity: .75;
}
99.99% {
opacity: 1;
}
100% {
opacity: 0;
}
}
- 2 回答
- 0 關(guān)注
- 226 瀏覽
添加回答
舉報
0/150
提交
取消