Skip to content

Instantly share code, notes, and snippets.

@nladart
Created March 18, 2013 02:59
Show Gist options
  • Save nladart/5184709 to your computer and use it in GitHub Desktop.
Save nladart/5184709 to your computer and use it in GitHub Desktop.
A CodePen by Nick LaDart. Css3 animation
<div class="logo">
<div class="color-1"></div>
<div class="color-2"></div>
<div class="text">76</div>
</div>
@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;
}
}
@nladart
Copy link
Author

nladart commented Mar 18, 2013

HAVE TO INCLUDE PREFIXFREE.JS

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment