我想淡出一个字然后淡出另一个字但问题是它似乎又回来了
我试图将不透明度从1变为零，但它不起作用
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>我希望（你好）完全消失，并且（你喜欢熊猫）淡入
您必须在淡出类中添加值为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>在创建动画时，有时需要指定填充模式。这就是告诉你的动画元素，动画结束后要保留哪种样式。
您可以使用animation-fill-mode property指定填充模式。
animation-fill-mode property可以设置为：
通过设置为向前，元素将保持您在动画的100％中指定的样式。
通过设置为向后，元素将使您指定的样式保持在0％。
因此，您可以添加
.fade-out{
animation: fadeout 5s;
animation-fill-mode : forwards;
}
它应该工作。
希望有所帮助。