A Pen by Adam Henley.

Bunting-Blowing-in-the-Breeze.markdown

Bunting Blowing in the Breeze

Just some bunting gently blowing in the breeze on a balmy afternoon.

A Pen by Adam Henley on CodePen.

License.

index.haml

.bunting
    %ul
        - 16.times do
            %li#someID
    

style.less

@bg: rgb(178, 215, 255);
html{min-width:1920px;}
body { background-color: @bg; overflow:hidden;}

.down_triangle(@w @h @c){
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: @h @w/2 0 @w/2;
  border-color: @c transparent transparent transparent;
  -webkit-transform:rotate(360deg);
}
.swing_keyframes(@d){
  0% { .rotate(0); }
  25% { /*width:50px; height:50px; */} 
  50% { .rotateX(@d); } 
  75% { /*width:50px; height:50px;*/ } 
  100% { .rotateX(0deg);  }   
}

.z-travel-keyframes(){
  0% { .rotate(0); }
  25% { /*width:50px; height:50px; */} 
  50% { .rotateX(10); } 
  75% { /*width:50px; height:50px;*/ } 
  100% { .rotateX(0deg);  } 
}

.bunting ul {
  //text-align:justify; 
  white-space: nowrap
  display:block;
  position:relative;
  width:150%;height:150px;
  top:0;right:0;bottom:0;left:-70px;  
  border-top: 3px solid rgb(206, 185, 125);
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  min-width:1920px;
  .box-shadow(1px -1px 0px 1px lighten(rgb(206, 185, 125),15%) );
  margin-top:20px; 
  .animation(z-travel 8s linear infinite);   
    @-webkit-keyframes z-travel  { .z-travel-keyframes(); }
       @-moz-keyframes z-travel  { .z-travel-keyframes(); }
         @-o-keyframes z-travel  { .z-travel-keyframes(); }
            @keyframes z-travel  { .z-travel-keyframes(); } 
  
  li {
    display:inline-block;
    width:100px; height:100px;
    margin:0 15px;
    .transform-origin(50% 0);     
    .perspective(200px);    
    .down_triangle(100px, 100px, rgb(255,255,255));
    background-color:transparent;
  }  
  
  li:nth-of-type(1n+1){
    border-top-color: rgb(102, 102, 255); 
    .animation(swing 8s linear infinite);   
    @-webkit-keyframes swing  { .swing_keyframes(30); }
       @-moz-keyframes swing  { .swing_keyframes(30); }
         @-o-keyframes swing  { .swing_keyframes(30); }
            @keyframes swing  { .swing_keyframes(30); } 
  }
  li:nth-of-type(2n+1){
    border-top-color: rgb(72, 165, 72);
    .animation(swing1 8s linear infinite);   
    @-webkit-keyframes swing1  { .swing_keyframes(-14); }
       @-moz-keyframes swing1  { .swing_keyframes(-14); }
         @-o-keyframes swing1  { .swing_keyframes(-14); }
            @keyframes swing1  { .swing_keyframes(-14); } 
  }
  li:nth-of-type(3n+2){
    border-top-color: rgb(255, 255, 181);
    .animation(swing2 8s linear infinite); 
    @-webkit-keyframes swing2  { .swing_keyframes(21); }
       @-moz-keyframes swing2  { .swing_keyframes(21); }
         @-o-keyframes swing2  { .swing_keyframes(21); }
            @keyframes swing2  { .swing_keyframes(21); }   
  }
  
}