CSS Background crossfading issue

Question

У меня проблема с моим фоном, кроссфейдинг не работает НА ВСЕ. Возможно, кто-то сможет сказать мне, что я сделал неправильно? :) Вот сценарий:

HTML:

<div class="bg"> 
    <div class="backgroundchange"> 
     <div class="bgimg" id="bg1"> 
      <div class="title centerV"> 
       <div> 
        <div class="text"> 
         <h1>Malarstwo</h1> 
         <p>Beaty Domanskiej</p> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="bgimg" id="bg2"> 
      <div class="title centerV"> 
       <div> 
        <div class="text"> 
         <h1>Malarstwo</h1> 
         <p>Beaty Domanskiej</p> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="bgimg" id="bg3"> 
      <div class="title centerV"> 
       <div> 
        <div class="text"> 
         <h1>Malarstwo</h1> 
         <p>Beaty Domanskiej</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS:

.bgimg { 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    position: absolute; 
    background-repeat: no-repeat; 
    background-position: center center; 
    transform: scale(1); 
    -webkit-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    -moz-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
} 

#bg1 { 
    background-image: url("../img/gallery/slonecz.jpg"); 
} 

#bg2 { 
    background-image: url("../img/gallery/motyl.jpg"); 
} 

#bg3 { 
    background-image: url("../img/gallery/slonecz.jpg"); 
} 

@keyframes backgroundchangeFadeInOut { 
    0% { 
     opacity: 1; 
    } 

    17% { 
     opacity: 1; 
    } 

    25% { 
     opacity: 0; 
    } 

    92% { 
     opacity: 0; 
    } 

    100% { 
     opacity: 1; 
    } 
} 

@-webkit-keyframes backgroundchangeFadeInOut { 
    0% { 
     opacity: 1; 
    } 

    17% { 
     opacity: 1; 
    } 

    25% { 
     opacity: 0; 
    } 

    92% { 
     opacity: 0; 
    } 

    100% { 
     opacity: 1; 
    } 
} 

#backgroundchange div:nth-of-type(1) { 
    animation-delay: 8s; 
    -webkit-animation-delay: 8s; 
} 

#backgroundchange div:nth-of-type(2) { 
    animation-delay: 6s; 
    -webkit-animation-delay: 6s; 
} 

#backgroundchange div:nth-of-type(3) { 
    animation-delay: 4s; 
    -webkit-animation-delay: 4s; 
} 

#backgroundchange div { 
    animation-name: backgroundchangeFadeInOut; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
    animation-duration: 8s; 
    -webkit-animation-name: backgroundchangeFadeInOut; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 8s; 
} 

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

Answer 1

Вы хотите чего-л, как это?

Вот код, который работает на моем ноутбуке:

CSS:

.bgimg { 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    position: absolute; 
    background-repeat: no-repeat; 
    background-position: center center; 
    transform: scale(1); 
    -webkit-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    -moz-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background-image: url("../img/gallery/slonecz.jpg"); 
    animation-name: backgroundchangeFadeInOut; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
    animation-duration: 8s; 
    -webkit-animation-name: backgroundchangeFadeInOut; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 8s; 
} 

@keyframes backgroundchangeFadeInOut { 
    0% { 
     background-image: url("../img/gallery/slonecz.jpg"); 
    } 
    50% { 
     background-image: url("../img/gallery/motyl.jpg"); 
    } 
    100% { 
     background-image: url("../img/gallery/slonecz.jpg"); 
    } 
} 

HTML:

<div class="bg"> 
    <div class="backgroundchange"> 
     <div class="bgimg" id="bg1"> 
      <div class="title centerV"> 
       <div> 
        <div class="text"> 
         <h1>Malarstwo</h1> 
         <p>Beaty Domanskiej</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 2

Вы не можете настроить анимацию без установки css @keyframe.

добавить ключевые кадры для ваших всех анимаций здесь пример ниже:

@-webkit-keyframes backgroundchangeFadeInOut{ 
      0% {transform: translateY(-100%); opacity: 0;} 
      80% {transform: translateY(40%);} 
      100% {transform: translateY(0%); opacity: 1;} 
     }