A CodePen by Nick LaDart. Css3 animation

index.html

<div class="logo">
    <div class="color-1"></div>
    <div class="color-2"></div>
    <div class="text">76</div>
</div>

style.css

@import url(http://fonts.googleapis.com/css?family=Alfa+Slab+One);
.logo {
    position:relative;
    width:200px;
    height:90px;
    margin:40px auto;
}

.color-1, .color-2, .text {
    width:200px;
    height:90px;
    position:absolute;
    top:0;
    left:0; 
    opacity:0.5;
}

.color-1 {
   background:orange;
   animation: my-reverse-skew 2s infinite ease;
   
}
.color-2 {
    background:red;    
    animation: my-skew 2s infinite ease;
}
.text {
    color:white;
    text-align:center;
    padding-top:25px;
   font-family: 'Alfa Slab One', cursive;
    font-size:40px;
    opacity:0.8; 
z-index:300;    
}

@keyframes my-skew
{
    0% {
       transform: matrix(1, -0.4,  0, 1.02, 0, 0);
    z-index:100;
    
    }
    50% {
         transform: matrix(1, 0.4,  0, 1.02, 0, 0);
    z-index:200;
   
    }
    100% {
       transform: matrix(1, -0.4,  0, 1.02, 0, 0);
     z-index:100;
    }
}
@keyframes my-reverse-skew
{
    0% {
       transform: matrix(1, 0.4,  0, 1.02, 0, 0);
    z-index:200;
    }
    50% {
         transform: matrix(1, -0.4,  0, 1.02, 0, 0);
    z-index:100;
    }
    100% {
       transform: matrix(1, 0.4,  0, 1.02, 0, 0);
    z-index:200;
     
    }
}

HAVE TO INCLUDE PREFIXFREE.JS