CODEWITHSUNDEEP
css
Sachin Menon
Sachin Menon

Reputation: 69

animation happening over 2 background images

I have 2 images which I'm trying to make as my background image. I want those images to fade in and fade out after 2 seconds. At present the change in the background image is happening when I hover over the image. How can I make this change happen automatically, without any hover?

.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>

Upvotes: 0

Views: 480

Answers (1)

Blazed
Blazed

Reputation: 309

You can use animation property

I've do this code for you (with some 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>

Upvotes: 1

Related Questions