Banner Animation

by Keith Jeter

HTML

<div class="cox_wrapper">
    <a href="http://www.google.com" target="blank">
    <div class="wht_bar">
      <div class="cox_business ani-lft7"></div>
      <div class="cox_detection ani-lft6"></div>
      <div class="cox_logo"></div>
    </div>
    
    <div class="overlay ani-rt"></div>
    
    <div class="lshape skew">
        <div class="txt_sleep ani-lft"></div>
        <div class="txt_alert ani-lft2"></div>
        <div class="txt_monitor ani-lft3"></div>
        <div class="txt_security ani-lft4"></div>
        <div class="txt_graphic ani-lft5"></div>
    </div>
    
    <div class="rshape skew">
        <div class="txt_can ani-rt2"></div>
        <div class="txt_trip ani-rt3"></div>
        <div class="txt_send ani-rt4"></div>
        <div class="txt_means ani-rt5"></div>
        <div class="txt_month ani-rt6"></div>
    </div>

    <div class="bg"></div>
    </a>
</div>

CSS

.cox_wrapper {
    position: relative;
    overflow: hidden;
    width: 300px;
    height: 250px;
    border: solid 1px #000;
}

.lshape {
    z-index: 400;
    position: absolute;
    overflow: hidden;
    width: 200px;
    height: 190px;
    margin-left: -54px;
}

.rshape {
    z-index: 400;
    position: absolute;
    overflow: hidden;
    width: 200px;
    height: 190px;
    margin-left: 147px;
}

.skew {
    -webkit-transform: skew(-15deg);
	-moz-transform: skew(-15deg);
	-o-transform: skew(-15deg);
    transform: skew(-15deg);
}

.lshape > div, .rshape > div {
    -webkit-transform: skew(15deg);
	-moz-transform: skew(15deg);
	-o-transform: skew(15deg);
    transform: skew(15deg);
}

.txt_sleep {
    position: absolute;
    right: -122px;
    top: 65px;
    width: 122px;
    height: 80px;
    background: url(http://galnova.com/cox/img/all4.png) 0px -134px no-repeat;
}

.txt_can {
    position: absolute;
    left: -135px;
    top: 65px;
    width: 127px;
    height: 80px;
    background: url(http://galnova.com/cox/img/all4.png) -122px -134px no-repeat;
}

.txt_alert {
    position: absolute;
    right: -122px;
    top: 38px;
    width: 127px;
    height: 80px;
    background: url(http://galnova.com/cox/img/all4.png) 0 -214px no-repeat;
}

.txt_trip {
    position: absolute;
    left: -135px;
    top: 95px;
    width: 127px;
    height: 80px;
    background: url(http://galnova.com/cox/img/all4.png) -120px -270px no-repeat;
}

.txt_monitor {
    position: absolute;
    right: -122px;
    top: 23px;
    width: 132px;
    height: 105px;
    background: url(http://galnova.com/cox/img/all4.png) 0 0 no-repeat;
}

.txt_send {
    position: absolute;
    left: -150px;
    top: 24px;
    width: 132px;
    height: 125px;
    background: url(http://galnova.com/cox/img/all4.png) -120px 0 no-repeat;
}

.txt_security {
    position: absolute;
    right: -140px;
    top: 50px;
    width: 140px;
    height: 105px;
    background: url(http://galnova.com/cox/img/all4.png) 0...