Animated Logo

http://codepen.io/anon/pen/epbWNj?editors=110

by bizamajig

HTML

<div class="progress-messaging">
    <hr />
    <hr />
</div>

CSS

.progress-messaging {
    display: table;
    margin: 100px auto
}
.progress-messaging hr:first-child,
.progress-messaging hr:last-child {
    background-image: url("http://bizamajig.com/images/bizamajig-ui/progress-messaging-1.png");
    background-repeat: no-repeat;
    border: none;
    opacity: 0.5
}
.progress-messaging hr:first-child {
    margin: 0;
    width: 300px;
    height: 154px;
    display: block;
    opacity: 0.5
}
.progress-messaging hr:last-child {
    margin: 0;
    width: 0;
    height: 154px;
    position: absolute;
    display: block;
    transition: width 4s;
    transform: translateY(-100%);
}
/*
.progress-messaging.hover hr:last-child,
.progress-messaging:hover hr:last-child {
    width: 300px;
}
*/
@keyframes changewidth {
  from {
    width: 0px;
  }

  to {
    width: 300px;
  }
}

.progress-messaging hr:last-child {
  animation-duration: 4s;
  animation-name: changewidth;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}