Rotating Text Barrel - Animation Idea #11

Here is another fun little HTML/CSS idea for all of you.

A rotating text barrel.

OK - maybe there is another name for this but I am going with the barrel.

Here is the code needed to pull this off.
As always - test with your platform for conflicts and let me know about any bugs with this

CSS for Branding and Look area
 

/** Rotating Text Barrel **/

/** This block will help set the color and dimensions of your widget **/
#barrel {
  background: #000000;
  height: 100px;
  width:100%;
  position: absolute;
}

/** This block will allow you to adjust **/
/** your positioning of the barrel **/
/** Set all values as desired **/
#barrelBox {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 35px;
}

/** This block will set parameters on the static text **/
.flipSign h3 {
  height: 30px;
  float: left;
  margin-right: 5px;
  color: #ffffff;
}

/** This block has general settings for the moving text **/
.barrelText {
  float: left;
  overflow: hidden;
  position: relative;
  height: 25px;
  top: 0px;
}

/** This block has settings specific to the moving text **/
/** Adjust animation timing as desired **/
.barrelText h3 {
  display: inline-block;
  color: #00ff00;
  position: relative;
  white-space: nowrap;
  top: 0;
  left: 3;
  animation:move 10s;
  animation-iteration-count:infinite;
  animation-delay:1.5s;
}

/** This block provides the timing of the animation **/
/** If you want more or less words, **/
/** you'll need to adjust the segmentation of this **/
/** Adjust the pixel values to suit your desired font size **/
@keyframes move{
0%  { top: 0px; }
20% { top: -24px; }
40% { top: -48px; }
60% { top: -72px; }
80% { top: -96px; }
100% { top: -120px; }
}

HTML for your widget

<div id="barrel" class="flipSign">
  <div id="barrelBox">
    <h3>Learning is</h3>
    <div class="barrelText">
<!-- Adjust your words as desired -->
<!-- Adjust your font size as desired -->
<!-- If you change font size you will need -->
<!-- to make other adjustments in CSS -->
      <h3>
        fun<br /> 
        important<br />
        invigorating<br />
        uplifting<br />
        life<br />
        fun
      </h3>
    </div>
  </div>
</div>

Hopefully this makes someone smile today!