CSS одушевленного переход фонового изображения темнеет

Question

Так я строй страницы, которая имеет фоновое изображение:

body { 
    background:url(images/bg.png) center center no-repeat fixed; 
    -webkit-background-size:cover; 
    -moz-background-size:cover; 
    -o-background-size:cover; 
    background-size:cover 
} 

страница загружается с DIV, который выглядит как предупреждения/сообщение. Когда Дива нагрузку я хочу короткую анимация фона изображения становится темнее,
Сейчас я использую это:

back { 
    background:rgba(0,0,0,.95); 
    display:block; 
    height:100%; 
    left:0; 
    opacity:1; 
    position:fixed; 
    top:0; 
    width:100% 
} 

Это делает его более темным, но я хочу, чтобы это произошло постепенно в плавном переходе/анимации ,

Answer 1

Для этого можно использовать @keyframes. Я не знаю, что ваш HTML выглядит, но вот немного демо:

.back { 
 
    background:rgba(0,0,0,.95); 
 
    display:block; 
 
    height:500px; 
 
    left:0; 
 
    opacity:1; 
 
    position:fixed; 
 
    top:0; 
 
    width:500px; 
 
} 
 

 
@keyframes back-change { 
 
    from { background: rgba(133,133,133,.95) } 
 
    to { background: rgba(0,0,0,.95) } 
 
} 
 

 
.back { 
 
    animation: back-change 4s linear; 
 
}

<div class="back"></div>

Я установил его, чтобы изменить от света к темноте над 4s в линейном образце. Вы можете изменить продолжительность или изменить шаблон на все, что хотите (нет, бесконечно и т. Д.).

Обратите внимание, что имя back-change, которое следует за словом @keyframes, - это то, что вам нужно будет позвонить в собственность animation позже. Если вы измените имя в одном месте, вам придется изменить его в обоих.

Адрес JSFiddle Example также может работать самостоятельно.

---

Вы также можете использовать CSS3 Transitions. Они были немного расширены в веб-браузерах.

.back { 
 
    background:rgba(0,0,0,.95); 
 
    display:block; 
 
    height:500px; 
 
    left:0; 
 
    opacity:1; 
 
    position:fixed; 
 
    top:0; 
 
    width:500px; 
 
    transition-property: background-color; 
 
    transition-duration: 0.3s; 
 
} 
 

 
.back:hover { 
 
    background-color: rgba(133,133,133,.95); 
 
}

<div class="back"></div>

Опять же, вот в JSFiddle Example для Вас, чтобы играть.

Answer 2

Это работа для перехода, а не анимация:

В этом примере я буду менять непрозрачность исчезать, когда вы наведите курсор мыши на него ...

.TransitStyle { 

background:rgba(0,0,0,.95); 
display:block; 
height:100%; 
left:0; 
opacity:1; 
position:fixed; 
top:0; 
width:100% 

-webkit-transition-property: opacity; 
-moz-transition-property: opacity; 
-ms-transition-property: opacity; 
-o-transition-property: opacity; 
transition-property: opacity; 

-webkit-transition-timing-function: linear; 
-moz-transition-timing-function: linear; 
-ms-transition-timing-function: linear; 
-o-transition-timing-function: linear; 
transition-timing-function: linear; 

-webkit-transition-duration: 0.5s; 
-moz-transition-duration: 0.5s; 
-ms-transition-duration: 0.5s; 
-o-transition-duration: 0.5s; 
transition-duration: 0.5s; 
} 

.TransitStyle:hover { 
opacity: 0.0; 
} 

Answer 3

Вы можете использовать simple css transition и jQuery addClass() метод только для установки атрибута класса элемента.

JS

$(window).load(function() { 
    $('.overlay').addClass('dark'); 
}); 

CSS

.overlay { 
    background-color: rgba(0,0,0,0); 
    transition: background-color 1s ease; 
} 

.dark{ 
    background-color: rgba(0,0,0,.95); 
} 

FIDDLE