CODEWITHSUNDEEP
cssanimationsliderslideshowfadein
Pie
Pie

Reputation: 25

CSS image slider with fade in

I have been trying to create a simple image slider showcasing four images for a website. I have managed to create the slideshow, however the transition between each images is really fast and I want a bit of a fade in effect so that it's smoother. A lot of the questions on here already suggest using jQuery but I am trying to do it with just CSS. I've also explored the animate.css but couldn't get it to work. Appreciate any/all help given. Thanks :)

Heres the code so far:

HTML

   <div class="slider">
      <div class="feature">
      </div>
      <div class="overlay">

      </div>
   </div>

and the CSS

.feature {
   animation: slide 3s;

}

.slider {
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
   height: 80vh;
   animation: slide 10s infinite;
}

.overlay {
   color: #fff;
   width: 100%;
   height: 80vh;
   background-color: rgba(0, 0, 0, 0.5);
}



@keyframes slide {
   0%{
      background-image: url(../resources/feature/Feature1.jpg);
   }

   25%{
      background-image: url(../resources/feature/Feature1.jpg);
   }

   25.1%{
      background-image: url(../resources/feature/Feature2.jpg);
   }

   50%{
      background-image: url(../resources/feature/Feature2.jpg);
   }
   50.01%{
      background-image: url(../resources/feature/Feature3.jpg);
   }

   75%{
      background-image: url(../resources/feature/Feature3.jpg);
   }

   75.01%{
      background-image: url(../resources/feature/Feature4.jpg);
   }

   100%{
      background-image: url(../resources/feature/Feature4.jpg);
   }
}

Upvotes: 1

Views: 14017

Answers (3)

lalit bhakuni
lalit bhakuni

Reputation: 627

you can try to manege animation Opacity and no any other way to create this slider will show & transition. 

     @keyframes slide {
   0%{
      background-image: url(https://image.flaticon.com/sprites/new_packs/178146-business-strategy.png);

   }
   48%{ opacity:0;
   }
   50%{
      opacity:1;
      background-image: url(https://images-eu.ssl-images-amazon.com/images/I/51TxXo0RLgL.png);

   }
   97%{ opacity:1;
   98%{ opacity:0;
    100%{
      opacity:1;
      background-image: url(https://image.flaticon.com/sprites/new_packs/178146-business-strategy.png);

   }
}

https://jsfiddle.net/m4tsudc7/21/

Upvotes: 0

caiovisk
caiovisk

Reputation: 3809

You have to set the opacity and transition of the "sliders" to get the effect.

.feature {

}

.slider {
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
   height: 80vh;
   transition: all .2s ease-in-out;
   animation: slide 10s infinite;
}

.overlay {
   color: #fff;
   width: 100%;
   height: 80vh;
   background-color: rgba(0, 0, 0, 0.5);
   transition: all .2s ease-in-out;
}



@keyframes slide {
   0%{
      opacity: 0;
      background-color: red;
   }

   20%{
   opacity: 1;
      background-color: red;
   }
   25%{
   opacity: 0;
      background-color: red;
   }
   25.1%{
   opacity: 0;
      background-color: blue;
   }

   45%{
   opacity: 1;
      background-color: blue;
   }
   50%{
   opacity: 0;
      background-color: blue;
   }
   50.01%{
   opacity: 0;
      background-color: yellow;
   }

   70%{
   opacity: 1;
      background-color: yellow;
   }
   75%{
   opacity: 0;
      background-color: yellow;
   }

   75.01%{
   opacity: 0;
      background-color: green;
   }

   95%{
   opacity: 1;
      background-color: green;
   }
   100%{
   opacity: 0;
      background-color: green;
   }
}
<div class="slider">
      <div class="feature">
      </div>
      <div class="overlay">

      </div>
   </div>

Upvotes: 2

Lucifer
Lucifer

Reputation: 678

Just change the line 

animation: slide 10s infinite;

to 

animation: slide 20s infinite;

and it would give some time for transition.

Upvotes: 0

Related Questions