label-rotator

by phloe

HTML

<div class="box">

  <div class="box__label">
    <div class="label-rotator">
      <div class="label-band label-band--items-1">
        <div class="label label--item-1">
          Foo and the funky bunch
        </div>
      </div>
    </div>
  </div>

</div>

<div class="box">

  <div class="box__label">
    <div class="label-rotator">
      <div class="label-band label-band--items-2">
        <div class="label label--item-1">
          Foo and the funky bunch
        </div>
        <div class="label label--item-2">
          Bar world
        </div>
      </div>
    </div>
  </div>

</div>

CSS

.box {
  position: relative;
  margin: 20px;
  min-height: 100px;
  background-color: grey;
}

.box__label {
  position: absolute;
  top: 24px;
  left: -8px;
}

.label-rotator {
  background-color: cyan;
  overflow: hidden;
  contain: content;
}


.label-band--items-1 {
  animation: label-band-rotator-1 5s ease-in-out infinite;
}

.label-band--items-2 {
  animation: label-band-rotator-2 10s ease-in-out infinite;
}

.label {
  width: 100%;
  height: 28px;
  line-height: 18px;
  background-color: magenta;
  display: block;
  box-sizing: border-box;
  padding: 5px 10px;
}
.label--item-2 {
  margin-top: -28px;
  margin-left: 200%;
}

@keyframes label-band-rotator-2 {
  0% {
    transform: translateX(-300%);
  }
  7% {
    transform: translateX(-200%);
  }
  43% {
    transform: translateX(-200%);
  }
  50% {
    transform: translateX(-100%);
  }
  57% {
    transform: translateX(0%);
  }
  93% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes label-band-rotator-1 {
  0% {
    transform: translateX(-100%);
  }
  14% {
    transform: translateX(0%);
  }
  86% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}