@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; } }