Ribbon Animation

by Keith Jeter

HTML

<div class="ribbon">
  <div class="medallion"></div>

  <div class="ribbon-1">
    <span class="inner">
						  		<span class="fadeLeft">Welcome</span>
    </span>
  </div>

  <div class="ribbon-2">
    <span class="inner">
								<span class="fadeRight">ExplosivePixel</span>
    </span>
  </div>

  <div class="ribbon-3">
    <span class="inner">
								<span class="fadeLeft">Contact us for all of your design needs</span>
    </span>
  </div>

  <div class="ball fadeIn">
    <span class="ball-text">
						   		<strong>BRANDS</strong>
						   		Done Right
							</span>
  </div>
</div>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

CSS

/*@import "http://fonts.googleapis.com/css?family=Oswald:400,700";*/
body {
  font-family: 'Oswald', sans-serif;
  letter-spacing: 1px;
}

* {
  box-sizing: border-box;
}

.ribbon {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0 auto;
  right: 0;
}
.ribbon [class*="ribbon-"] {
  margin: 74px auto 0;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(-8.5deg);
          transform: rotate(-8.5deg);
  position: relative;
  z-index: 4;
  width: 287px;
  height: 56px;
}
.ribbon [class*="ribbon-"] .inner {
  background: #003468;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  display: block;
  width: 0;
  height: 100%;
  padding: 11px 0;
  font-size: 1.5em;
  text-shadow: 3px 3px 1px #001b47;
  position: relative;
  z-index: 2;
  -webkit-transform: skewX(-9deg);
          transform: skewX(-9deg);
  -webkit-transition: width .12s ease-in-out;
  transition: width .12s ease-in-out;
}
.ribbon [class*="ribbon-"]:before {
  content: '';
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: rotate(-17.25deg) skewX(-9deg) translateX(158px);
          transform: rotate(-17.25deg) skewX(-9deg) translateX(158px);
  display: block;
  width: 0;
  height: 100%;
  position: absolute;
  top: 0;
  left: 4px;
  background: #001b47;
  z-index: -1;
  -webkit-transition: all .12s ease-in-out .7s;
  transition: all .12s ease-in-out .7s;
}
.ribbon .ribbon-1 .inner {
  letter-spacing: 19px;
  font-weight: 700;
}
.ribbon.active .inner {
  width: 100%;
}
.ribbon.active .ribbon-1 .inner {
  -webkit-transition-delay: .82s;
          transition-delay: .82s;
}
.ribbon.active .ribbon-1:before {
  width: 158px;
  -webkit-transform: rotate(-17.25deg) skewX(-9deg) translateX(0);
          transform: rotate(-17.25deg) skewX(-9deg) translateX(0);
}
.ribbon .ribbon-2 {
  z-index: 3;
  font-size: 45px;
  width: 451px;
  height: 137px;
  margin-top: 22px;
}
.ribbon .ribbon-2 .inner {
  padding:...

JavaScript

$(document).ready(function() {
  setTimeout(function() {
    $('.ribbon').addClass('active');
  }, 500);
});