CSS code sample for a slider

slider.css

// HERO SLIDER
.hero-slider {
  width: 100vw;
  height: 55vh;
  position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
  position: absolute;
  width: 100%;
  height: 100%;
}

.hero-text {
  z-index: 9;
}

.hero-text h2 {
  font-size: 2rem;
}

.slide1 {
  background-image: linear-gradient(rgba(0,130,170,0),rgba(0,130,170,1)), url(/rainbow-mtns.jpg)no-repeat center;
      background-size: cover;
    animation:fade 8s infinite;
-webkit-animation:fade 8s infinite;

}
.slide2 {
  background: linear-gradient(rgba(0,130,170,0),rgba(0,130,170,1)), url(/rainbow-paint.jpg)no-repeat center;
      background-size: cover;
    animation:fade2 8s infinite;
-webkit-animation:fade2 8s infinite;
}
.slide3 {
    background: linear-gradient(rgba(0,130,170,0),rgba(0,130,170,1)), url(/rainbow-puddle.jpg)no-repeat center;
      background-size: cover;
    animation:fade3 8s infinite;
-webkit-animation:fade3 8s infinite;
}
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}

// - end HERO SLIDER