Question

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

我尝试将不透明度从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>

我希望（hello）完全淡出，并且让（您喜欢熊猫）淡入

Answer 1

您必须在淡出类中添加值为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>

Answer 2

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

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

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

animation-fill-mode属性：转发；
animation-fill-mode属性：向后；
animation-fill-mode属性：两者；
动画填充模式属性：无；

通过设置前进，该元素将保留您在动画的100％中指定的样式。

通过向后设置，该元素会将您指定的样式保持在0％。

因此，您可以添加

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

，它应该可以工作。

希望有帮助。

为什么CSS的不透明度会逐渐消失

2 个答案: