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

, 내가 첫 번째 배경 세트를 볼 수 있지만, 그것은으로 크로스 페이드 결코 다음.

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