Question

我正在运行以下代码，一旦动画完成，图像的不透明度就会发生变化。直到它改变了不透明度，图像看起来很平滑。

请在以下JS中找到代码：https://jsfiddle.net/7fk0b788/

<!DOCTYPE html>
<html lang ="en">
<head>
<title> joe's Pizza Co.-New York's Best Pizza</title>
<link rel="stylesheet" href="style.css">

</head>
<body>
<div id="container">
<header>
<h1>
Joe's Pizza
</h1>

</header>


<div>

<section id="feature">
</section>

<section id="home-text">
</section>

<section id="offers">
</section>



</div>
<footer>
</footer>


</div>
</body>
</html>

#container
{
background: url("Img/background.jpg") no-repeat center center fixed; 
background-size:cover;
min-width: 100%;
min-height: 100%;
position: fixed;
top:0;
left:0;
animation: fadein 4s;
filter: opacity(50%);
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:.5;
    }
}

Answer 1

有几种方法可以做到：

将forwards添加到animation属性，因为这样可以确保动画一旦到达100%，它就会一直存在：

animation: fadein 4s forwards;

或添加

opacity:.5;

Using forwards

Using opacity

Answer 2

将不透明度.5更改为1.它会一直保持平稳直到结束。您的代码段

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

在＆＃34;动画＆＃34;之后不透明度增加属性

2 个答案: