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

【问题标题】：why is the css opacity fade out not working为什么css不透明度淡出不起作用
【发布时间】：2019-09-19 09:51:47
【问题描述】：

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

我尝试将不透明度从 1 设置为 0，但它不起作用

    animation: fadeout 5s;
}
@keyframes fadeout
{

from{opacity: 1;}
to {opacity: 0;

}

}
.fade-in{
    animation: fadein 5s;
}
@keyframes fadein
{

from{opacity: 0;}
to {opacity: 1;}

}
html{background-color: white}

<!DOCTYPE html>
<html>
<head>
    <title>welcom</title>
    <link rel="stylesheet" type="text/css" href="welc.css" >
</head>
<body>
    <center>
<font class='fade-out' size="30"> hello </font>

<font class='fade-in' size="30"> do you like pandas?</font>
    </center>
</body>
</html>

我想让 (hello) 完全淡出，让 (do you like pandas) 淡入

【问题讨论】：

您在 {opacity:0; 之后缺少一个右括号

标签： html css fade

【解决方案1】：

在创建动画时，有时需要指定填充模式。那就是告诉你的动画元素，在动画结束后保持哪种样式。

您可以使用animation-fill-mode property 指定填充模式。

animation-fill-mode property可以设置为：

动画填充模式：转发；
动画填充模式：向后；
动画填充模式：两者；
动画填充模式：无；

通过设置为向前，元素将保持您在 100% 的动画中指定的样式。

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

因此，您可以添加

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

它应该可以工作。

希望对您有所帮助。

【讨论】：

【解决方案2】：

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

.fade-out{ 
 animation: fadeout 5s;
 opacity: 0;
}
@keyframes fadeout
{

from{opacity: 1;}
to {opacity: 0;}

}
.fade-in{
  animation: fadein 5s;
}
@keyframes fadein
{

from{opacity: 0;}
to {opacity: 1;}

}
html{background-color: white}

<!DOCTYPE html>
    <html>
    <head>
        <title>welcom</title>
        <link rel="stylesheet" type="text/css" href="welc.css" >
    </head>
    <body>
        <center>
    <font class='fade-out' size="30"> hello </font>

    <font class='fade-in' size="30"> do you like pandas?</font>
        </center>
    </body>
    </html>

【讨论】：