A Pen by James Nesfield.

index.jade

body
  div.panel#one
  div.panel#two
  div.panel#three
  div.panel#four
  h4 color elements
  a(href="google.com")
    h3 download

style.less

html, body {
    background-color: #FFF;
    margin:0px;
    padding:0px;
    height:100%;
}

.panel {
  display:inline-block;
  margin:0px;
  padding:0px;
  border-width:0px;
  float:left;
  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
}

@-webkit-keyframes one {
    0%  { width: 10%; }
    20% { width: 65%; }
    40% { width: 10%; }
    60% { width: 70%; }
    80% { width: 5%; }
    100% { width: 10%; }
}

@-webkit-keyframes two {
    0% { width: 80%; }
    20% { width: 20%; }
    40% { width: 75%; }
    60% { width: 20%; }
    80% { width: 50%; }
    100% { width: 80%; }
}

@-webkit-keyframes three {
    0%  { width: 10%; }
    20% { width: 10%; }
    40% { width: 15%; }
    60% { width: 5%; }
    80% { width: 15%; }
    100%{ width: 10%; }
}

@-webkit-keyframes four {
    0% { width: 0%; }
    20% { width: 5%; }
    40% { width: 0%; }
    60% { width: 5%; }
    80% { width: 30%; }
    100% { width: 0%; }
}

@duration: 30s;

#one {
  height:100%;
  width:10%;
  background-color:#FF7F41;
  -webkit-animation: one @duration ease-in-out infinite;
}

#two {
  height:100%;
  width:90%;
  background-color:#00C7B1;
  -webkit-animation: two @duration ease-in-out infinite;

}

#three {
  height:100%;
  width:0%;
  background-color:#9063CD;
  -webkit-animation: three @duration ease-in-out infinite;
}

#four {
  height:100%;
  width:0%;
  background-color:#FF585D;
  -webkit-animation: four @duration ease-in-out infinite;
}

h4 {
     top: 95px;
     font-size: 8rem;
}

h3 {
     top: 375px;
     font-size: 5rem;
}

h4, h3 {
   position: absolute;
    font-family: 'Avenir', sans-serif;
    color: #FFF;
    width: 100%;
    font-weight: 100;
    text-align: center;
}

vbGdK.markdown

vbGdK

Forked from Milosch's Pen Dynec.

A Pen by James Nesfield on CodePen.

License.