Skip to content

Instantly share code, notes, and snippets.

@nladart
Created August 15, 2013 04:30
Show Gist options
  • Save nladart/6238274 to your computer and use it in GitHub Desktop.
Save nladart/6238274 to your computer and use it in GitHub Desktop.
A CodePen by Abderrahmane-TJ. The Mother, the daughter and her children - There is nothing interesting to say about this pen. Other than the fact that it is the first time I had a go on css3 animations and transform.
.c
.intro.animation
.r
.r
.r.red
.r
.r.red
.r.red
.r
.r
.r
.r.red
.r
.r
@import "compass";
@-webkit-keyframes infinite-spinning {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
*{padding: 0;margin: 0;@include box-sizing(border-box);}
html {width: 100%;height: 100%;}
body{@include display-box;@include box-align(center);@include box-pack(center);height: 100%;width: 100%;}
.c{
position: relative;
}
.r{
background-color: white;
width: 300px;
height: 10px;
opacity: .75;
@include background-origin(border-box);
position: absolute;
top: 0px;
left: 0px;
}
.animation{
.r{
animation: infinite-spinning 30s infinite linear;
}
>.r{
left: -150px;
}
}
.red{
background-color: #f16362 !important;
}
.blue{
background-color: #578ac7 !important;
}
.black{
background-color: #3b4647 !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment