CSS Only Banner Rotation

Using CSS animations to auto rotate banners.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>CSS Only Banner Rotation</title>
  <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      * {
  box-sizing: border-box;
}

html,
body {
  font-size: 10px;
}

#banners {
  height: 10rem;
  overflow-x: hidden;
  position: relative;
  width: 100%;
}
#banners .banner {
  animation: bannerOne 15s linear infinite;
  height: 10rem;
  position: absolute;
  width: 100%;
}
#banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 {
  color: #fff;
  font-size: 2rem;
  padding: 1rem;
  margin: 0;
}
#banners .banner.one h1 span, #banners .banner.two h1 span, #banners .banner.three h1 span {
  display: block;
}
#banners .banner.one .image, #banners .banner.two .image, #banners .banner.three .image {
  height: 100%;
  position: absolute;
  top: 0;
  width: 50%;
}
#banners .banner.one {
  background: red;
}
#banners .banner.one h1 {
  text-align: right;
  width: 50%;
}
#banners .banner.one .image {
  background: url("http://lorempixel.com/g/400/400/technics/2") no-repeat right center;
  background-size: 100%;
  right: 0;
}
#banners .banner.two {
  animation-name: bannerTwo;
  background: blue;
}
#banners .banner.two h1 {
  text-align: center;
}
#banners .banner.two .image {
  background: url("http://lorempixel.com/g/1000/200/technics/4") no-repeat center bottom;
  background-size: 100%;
  top: 50%;
  height: 50%;
  width: 100%;
}
#banners .banner.three {
  animation-name: bannerThree;
  background: green;
}
#banners .banner.three h1 {
  float: right;
  width: 50%;
}
#banners .banner.three .image {
  background: url("http://lorempixel.com/g/400/400/technics/5") no-repeat left center;
  background-size: 100%;
  left: 0;
}

@keyframes bannerOne {
  0% {
    left: 0;
  }
  31% {
    left: 0;
  }
  34% {
    left: -100%;
  }
  97% {
    left: 100%;
  }
  100% {
    left: 0;
  }
}
@keyframes bannerTwo {
  0% {
    left: 100%;
  }
  31% {
    left: 100%;
  }
  34% {
    left: 0;
  }
  64% {
    left: 0;
  }
  67% {
    left: -100%;
  }
  100% {
    left: -100%;
  }
}
@keyframes bannerThree {
  0% {
    left: 100%;
  }
  64% {
    left: 100%;
  }
  67% {
    left: 0;
  }
  97% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}
/* smallest */
/*@media (max-width: 320px;) {
  #banners {
    height: 10rem;
    .banner {
      &.one,
      &.two,
      &.three {
        height: 10rem;
        h1 {
          font-size: 2rem;
        }
      }
    }
  }
}*/
/* small */
@media (min-width: 321px) and (max-width: 728px) {
  #banners {
    height: 12rem;
  }
  #banners .banner.one, #banners .banner.two, #banners .banner.three {
    height: 12rem;
  }
  #banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 {
    font-size: 3rem;
    padding: 1.5rem;
  }
}
/* medium */
@media (min-width: 729px) and (max-width: 960px) {
  #banners {
    height: 20rem;
  }
  #banners .banner.one, #banners .banner.two, #banners .banner.three {
    height: 20rem;
  }
  #banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 {
    font-size: 6rem;
    padding: 2rem;
  }
}
/* large */
@media (min-width: 961px) {
  #banners {
    height: 20rem;
  }
  #banners .banner.one, #banners .banner.two, #banners .banner.three {
    height: 20rem;
  }
  #banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 {
    font-size: 6rem;
    padding: 2rem;
  }
}

    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <section id="banners">
  <div class="banner one">
    <h1>Banner One</h1>
    <div class="image"></div>
  </div>
  <div class="banner two">
    <h1>Second Banner</h1>
    <div class="image"></div>
  </div>
  <div class="banner three">
    <h1>Banner <span>The Third</span></h1>
    <div class="image"></div>
  </div>
</section>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
* {
  box-sizing: border-box;
}

html,
body {
  font-size: 10px;
}

#banners {
  height: 10rem;
  overflow-x: hidden;
  position: relative;
  width: 100%;
}
#banners .banner {
  animation: bannerOne 15s linear infinite;
  height: 10rem;
  position: absolute;
  width: 100%;
}
#banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 {
  color: #fff;
  font-size: 2rem;
  padding: 1rem;
  margin: 0;
}
#banners .banner.one h1 span, #banners .banner.two h1 span, #banners .banner.three h1 span {
  display: block;
}
#banners .banner.one .image, #banners .banner.two .image, #banners .banner.three .image {
  height: 100%;
  position: absolute;
  top: 0;
  width: 50%;
}
#banners .banner.one {
  background: red;
}
#banners .banner.one h1 {
  text-align: right;
  width: 50%;
}
#banners .banner.one .image {
  background: url("http://lorempixel.com/g/400/400/technics/2") no-repeat right center;
  background-size: 100%;
  right: 0;
}
#banners .banner.two {
  animation-name: bannerTwo;
  background: blue;
}
#banners .banner.two h1 {
  text-align: center;
}
#banners .banner.two .image {
  background: url("http://lorempixel.com/g/1000/200/technics/4") no-repeat center bottom;
  background-size: 100%;
  top: 50%;
  height: 50%;
  width: 100%;
}
#banners .banner.three {
  animation-name: bannerThree;
  background: green;
}
#banners .banner.three h1 {
  float: right;
  width: 50%;
}
#banners .banner.three .image {
  background: url("http://lorempixel.com/g/400/400/technics/5") no-repeat left center;
  background-size: 100%;
  left: 0;
}

@keyframes bannerOne {
  0% {
    left: 0;
  }
  31% {
    left: 0;
  }
  34% {
    left: -100%;
  }
  97% {
    left: 100%;
  }
  100% {
    left: 0;
  }
}
@keyframes bannerTwo {
  0% {
    left: 100%;
  }
  31% {
    left: 100%;
  }
  34% {
    left: 0;
  }
  64% {
    left: 0;
  }
  67% {
    left: -100%;
  }
  100% {
    left: -100%;
  }
}
@keyframes bannerThree {
  0% {
    left: 100%;
  }
  64% {
    left: 100%;
  }
  67% {
    left: 0;
  }
  97% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}
/* smallest */
/*@media (max-width: 320px;) {
  #banners {
    height: 10rem;
    .banner {
      &.one,
      &.two,
      &.three {
        height: 10rem;
        h1 {
          font-size: 2rem;
        }
      }
    }
  }
}*/
/* small */
@media (min-width: 321px) and (max-width: 728px) {
  #banners {
    height: 12rem;
  }
  #banners .banner.one, #banners .banner.two, #banners .banner.three {
    height: 12rem;
  }
  #banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 {
    font-size: 3rem;
    padding: 1.5rem;
  }
}
/* medium */
@media (min-width: 729px) and (max-width: 960px) {
  #banners {
    height: 20rem;
  }
  #banners .banner.one, #banners .banner.two, #banners .banner.three {
    height: 20rem;
  }
  #banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 {
    font-size: 6rem;
    padding: 2rem;
  }
}
/* large */
@media (min-width: 961px) {
  #banners {
    height: 20rem;
  }
  #banners .banner.one, #banners .banner.two, #banners .banner.three {
    height: 20rem;
  }
  #banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 {
    font-size: 6rem;
    padding: 2rem;
  }
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( CSS Only Banner Rotation ) is write by brandon kennedy, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © brandon kennedy