Непрозрачность увеличивается после свойства «animation»

Я запускаю следующий код и после того, как анимация завершает непрозрачность изображения. После анимации изображение выглядит гладко, после чего оно меняет непрозрачность.Непрозрачность увеличивается после свойства «animation»

пожалуйста найти код на следующих 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/ –

Есть несколько способов, вы можете сделать это:

Добавить forwards в animation собственности, которая будет убедиться, анимации, как только он попадает его 100%, она будет сохраняться:

animation: fadein 4s forwards;

или путем добавления

opacity:.5;

Using forwards

Using opacity

источник

2016-10-07 11:53:52 Albzi

Изменение непрозрачности 0,5 до 1. Это будет идти гладко до конца. Ваш фрагмент кода ниже

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

источник

2016-10-07 13:34:41

Непрозрачность увеличивается после свойства «animation»

ответ

Смежные вопросы