Forked from Milosch's Pen Dynec.
A Pen by James Nesfield on CodePen.
body | |
div.panel#one | |
div.panel#two | |
div.panel#three | |
div.panel#four | |
h4 color elements | |
a(href="google.com") | |
h3 download |
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; | |
} | |