Edit in JSFiddle

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

.color-1, .color-2, .text {
    width:400px;
    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;
     
    }
}