"アニメーション"プロパティの後に不透明度が増加する

次のコードを実行していて、アニメーションが完了するとイメージの不透明度が変わります。アニメーションが進行するまでは、不透明度を変更した後に滑らかに見えます。"アニメーション"プロパティの後に不透明度が増加する

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; 
    } 
}

出典

2016-10-07 Sanjana Porwal

不透明度を追加：.5; ＃コンテナに移動します。 https://jsfiddle.net/hrjh1zgp/1/ –

：

が、それはそのを打つ一度それがアニメーションを確認しますようanimationプロパティにforwardsを追加100%、それが持続する：

animation: fadein 4s forwards;

または

を添加することによって

Using forwards

Using opacity

出典

2016-10-07 11:53:52 Albzi

変更1.不透明度0.5

opacity:.5;

それは最後までスムーズに行きますよ。下のコードスニペット

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

出典

2016-10-07 13:34:41

"アニメーション"プロパティの後に不透明度が増加する

答えて

関連する問題