CSS Only Banner Rotation

Using CSS animations to auto rotate banners. What is a css only banner rotation How do you make a css only banner rotation? This script and codes were developed by Brandon Kennedy on 22 November 2021, Monday.

How do I make an css only banner rotation?
  1. CSS Only Banner Rotation Previews
  2. CSS Only Banner Rotation HTML Codes
  3. CSS Only Banner Rotation CSS Codes
CSS Only Banner Rotation Previews

CSS Only Banner Rotation HTML Codes

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

CSS Only Banner Rotation CSS Codes

* {
  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;
  }
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.