The Weylan Toucn

by SebastianPataneMasuelli

HTML

<div class="the_weylan_touch">
    <div class="wayline"></div>
    <div class="wayline"></div>
    <div class="wayline"></div>
    <div class="wayline"></div>
    <div class="wayline"></div>
    <div class="wayline"></div>
</div>

CSS

@-webkit-keyframes reset { 0% { margin-left: 100px; background: #adadad; } 100% { margin-left: 600px; background: #fff; } } 
@-webkit-keyframes fade-in-one { 0% { margin-left: 600px; background: #fff; } 100% { margin-left: 100px; background: #adadad; } }
@-webkit-keyframes fade-in-two { 0% { margin-left: 600px; background: #fff; } 100% { margin-left: 200px; background: #adadad; } }
@-webkit-keyframes fade-in-three { 0% { margin-left: 600px; background: #fff; } 100% { margin-left: 300px; background: #adadad; } }
@-webkit-keyframes fade-in-four { 0% { margin-left: 600px; background: #fff; } 100% { margin-left: 400px; background: #adadad; } }
@-webkit-keyframes fade-in-five { 0% { margin-left: 600px; background: #fff; } 100% { margin-left: 500px; background: #adadad; } }
@-webkit-keyframes fade-in-six { 0% { margin-left: 600px; background: #fff; } 100% { margin-left: 600px; background: #adadad; } }
.the_weylan_touch { height: 20px; width: 600px; }
.wayline { height: 1px; background:  #adadad;}
.wayline:nth-of-type(1) { -webkit-animation: fade-in-one 3s ease-in-out 1 0s; margin-left: 100px;  }
.wayline:nth-of-type(2) { -webkit-animation: fade-in-two 2.5s ease-in-out 1 0s; margin-left: 200px; margin-top: 3px; }
.wayline:nth-of-type(3) { -webkit-animation: fade-in-three 2s ease-in-out 1 0s; margin-left: 300px; margin-top: 4px; }
.wayline:nth-of-type(4) { -webkit-animation: fade-in-four 1.5s ease-in-out 1 0s; margin-left: 400px; margin-top: 3px; }
.wayline:nth-of-type(5) { -webkit-animation: fade-in-five 1s ease-in-out 1 0s; margin-left: 500px; margin-top: 2px; }
.wayline:nth-of-type(6) { -webkit-animation: fade-in-six .5s ease-in-out 1 0s; margin-left: 600px; margin-top: 2px; }
.wayline:hover { background: #111; }