CSS背景クロスフェーディングの問題

Question

バックグラウンドのクロスフェードがAT ALLで動作しないという問題が発生しています。 誰かが私に何が間違っているか教えてくれるだろうか？ :)ここで はスクリプトです：

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

その結果、私は、第1の背景セットを見ることができますが、それはにクロスフェード決して次のもの。

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