Skip to content

Instantly share code, notes, and snippets.

@agriboz
Forked from alexmwalker/dabblet.css
Created November 1, 2012 08:48
Show Gist options
  • Save agriboz/3992548 to your computer and use it in GitHub Desktop.
Save agriboz/3992548 to your computer and use it in GitHub Desktop.
Traffic light animation
/**
* Traffic light animation
*/
#trafficlight{
background:#333;
height:300px;
width:150px;
border-radius:30px;
margin:3em auto;
position:relative;
padding-top:12px;
border:2px #000 solid
}
#trafficlight span {
margin:20px auto;
display:block;
width:65px;
height:65px;
border:4px solid #000;
border-radius:50%;
box-shadow:5px 10px 20px rgba(0,0,0,.5),inset 5px 10px 10px rgba(0,0,0,.5)
}
#light1{ /* red light*/
background:#300;
animation: redlight 12s infinite
}
#light2{ /* amber light*/
background:#430;
animation: amberlight 12s infinite
}
#light3{ /* green light*/
background:#030;
animation: greenlight 12s infinite
}
@keyframes greenlight {
0%{background:#030}
5%{background:#0a0}
45%{background:#0a0}
50%{background:#030}
100%{background:#030}
}
@keyframes amberlight{
0%{background:#430}
45%{background:#430}
55%{background:#fc0}
60%{background:#430}
100%{background:#430}
}
@keyframes redlight{
0%{background:#300}
55%{background:#300}
60%{background:#f00}
95%{background:#f00}
100%{background:#300}
}
#light1, #light2, #light3 {
animation-duration:4s
}
body{
background: rgb(59,103,158); /* Old browsers */
min-height:100%;
height:700px;
background: linear-gradient(top,
rgba(59,103,158,1) 0%,
rgba(43,136,217,1) 72%,
rgba(6,17,40,1) 73%,
rgba(61,48,33,1) 88%); /* W3C */; /* W3C */
}
<!-- Traffic Lights - HTML -->
<div id="trafficlight">
<span id="light1"></span>
<span id="light2"></span>
<span id="light3"></span>
</div>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment