Html 为什么css不透明度淡出不起作用_Html_Css_Fade

Html 为什么css不透明度淡出不起作用

html css

Html 为什么css不透明度淡出不起作用,html,css,fade,Html,Css,Fade,我想淡出一个词，然后淡入另一个词，但问题是它似乎又回来了我试着把不透明度从一降到零，但不起作用动画：淡出5s； } @关键帧淡出 { 从{opacity:1；} 到{不透明度：0； } } .淡入{ 动画：fadein 5s； } @关键帧淡入淡出 { 从{opacity:0；} 到{opacity:1；} } html{背景色：白色} 韦尔科姆你好你喜欢熊猫吗？您必须在淡出类中添加值为0的不透明度属性，因为它是最终结果。淡出{ 动画：淡出5s；不透明度：0； } @关键帧淡

我想淡出一个词，然后淡入另一个词，但问题是它似乎又回来了

我试着把不透明度从一降到零，但不起作用

动画：淡出5s；
}
@关键帧淡出
{
从{opacity:1；}
到{不透明度：0；
}
}
.淡入{
动画：fadein 5s；
}
@关键帧淡入淡出
{
从{opacity:0；}
到{opacity:1；}
}
html{背景色：白色}


韦尔科姆
你好
你喜欢熊猫吗？

您必须在淡出类中添加值为0的不透明度属性，因为它是最终结果

。淡出{
动画：淡出5s；
不透明度：0；
}
@关键帧淡出
{
从{opacity:1；}
到{不透明度：0；}
}
.淡入{
动画：fadein 5s；
}
@关键帧淡入淡出
{
从{opacity:0；}
到{opacity:1；}
}
html{背景色：白色}


韦尔科姆
你好
你喜欢熊猫吗？

您必须在淡出类中添加值为0的不透明度属性，因为它是最终结果

。淡出{
动画：淡出5s；
不透明度：0；
}
@关键帧淡出
{
从{opacity:1；}
到{不透明度：0；}
}
.淡入{
动画：fadein 5s；
}
@关键帧淡入淡出
{
从{opacity:0；}
到{opacity:1；}
}
html{背景色：白色}


韦尔科姆
你好
你喜欢熊猫吗？

创建动画时，有时需要指定填充模式。这将告诉您的动画元素，动画结束后要保留的样式

可以使用指定填充模式

可设置为：

动画填充模式：正向
动画填充模式：向后
动画填充模式：两者都有
动画填充模式：无

通过设置为“前进”，元素将保持在100%的动画中指定的样式

通过设置为“向后”，元素将保持在0%中指定的样式

因此，您可以添加

.fade-out{
    animation: fadeout 5s;
    animation-fill-mode : forwards;
}

它应该会起作用

希望对您有所帮助。