The Mother, the daughter and her children

index.haml

.c
  .intro.animation
    .r
      .r.s95
        .r.red.s90
          .r.s85
            .r.red.s80
              .r.red.d3.s75
              .r
            .r
          .r
        .r.red
      .r
    .r

style.scss

@import "compass/css3";
@keyframes spin   {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}
*{padding: 0;margin: 0;@include box-sizing(border-box);}
html {width: 100%;height: 100%;}
body{width: 300px; margin: 200px auto;overflow:hidden}
.c{
  position: relative;
  margin-left:150px;
}
.r{
  background-color: white;  
  width: 300px; 
  height: 10px;
  opacity: .75;
  @include background-origin(border-box);
  position: absolute;
  top: 0px;
  left: 0px;
}
.animation{
  .r{
    animation: spin 30s infinite linear;
  }
  >.r{
    left: -150px;
  }
}
.red{
    background-color: #f16362 !important;
}
.black{
    background-color: #3b4647 !important;
}

The-Mother,-the-daughter-and-her-children.markdown

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.

A Pen by Abderrahmane-TJ on CodePen.

License.