Animation passiert über 2 Hintergrundbilder

Question

Ich habe 2 Bilder, die ich versuche, als mein Hintergrundbild zu machen. Ich möchte, dass diese Bilder nach 2 Sekunden ein- und ausgeblendet werden. Zur Zeit geschieht die Änderung im Hintergrundbild, wenn ich den Mauszeiger über das Bild halte. Wie kann ich diese Änderung automatisch und ohne Hover vornehmen?

.bground { 
 
    width:100%; 
 
    position:relative; 
 
    background: url(../img/bg1.jpg) no-repeat top center; 
 
    -webkit-transition-property: background; 
 
    -webkit-transition-duration: 1s; 
 
} 
 
.bground:hover { 
 
    background: url(../img/bg2.jpg) no-repeat top center; 
 
}

<section id="bground" class="bground"> 
 
    <div class="display"> 
 
    <img src="img/logo.png" alt="Logo"> 
 
    </div> 
 
    <div class="page-scroll"> 
 
    <a href="#about" class="btn btn-circle" style="color:#000000"> 
 
     <i class="fa fa-angle-double-down animated"></i> 
 
    </a> 
 
    </div> 
 
</section>

Answer 1

können Sie animation property

verwenden habe ich für Sie diesen Code tun (mit etwas img):

.bground { 
 
    width: 200px; 
 
    height: 200px; 
 
    position:relative; 
 
    background: url("http://www.bizreport.com/2011/02/03/android-logo-200x200.jpg") no-repeat top center; 
 
    -webkit-animation: 4s linear 0s infinite alternate test; 
 
    -o-animation:4s linear 0s infinite alternate test; 
 
    animation:4s linear 0s infinite alternate test; 
 
} 
 
@keyframes test { 
 
    0% {background-image: url("http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png");} 
 
    100% {background-image: url(http://www.bizreport.com/2011/02/03/android-logo-200x200.jpg");} 
 
}

<section id="bground" class="bground"> 
 
    <div class="display"> 
 
    </div> 
 
    <div class="page-scroll"> 
 
    <a href="#about" class="btn btn-circle" style="color:#000000"> 
 
     <i class="fa fa-angle-double-down animated"></i> 
 
    </a> 
 
    </div> 
 
</section>