Skip to content

Instantly share code, notes, and snippets.

@aschuch
Created March 28, 2013 16:34
Show Gist options
  • Save aschuch/5264707 to your computer and use it in GitHub Desktop.
Save aschuch/5264707 to your computer and use it in GitHub Desktop.
CSS3 pulsing dots, http://jsfiddle.net/24GXr/ and with fade in and fade out http://jsfiddle.net/qnN6B/
<div class="pulse green"></div>
<div class="pulse yellow"></div>
<div class="pulse red"></div>
html {
background-color: #232323;
}
.pulse {
margin: 30px;
width: 10px;
height: 10px;
background-color: #749a02;
border-radius: 5px;
}
@-webkit-keyframes greenPulse {
from {
background-color: #749a02;
-webkit-box-shadow: 0 0 9px #333;
}
50% {
background-color: #91bd09;
-webkit-box-shadow: 0 0 18px #91bd09;
}
to {
background-color: #749a02;
-webkit-box-shadow: 0 0 9px #333;
}
}
div.pulse.green {
-webkit-animation-name: greenPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes yellowPulse {
from {
background-color: #fc9200;
-webkit-box-shadow: 0 0 9px #333;
}
50% {
background-color: #ffb515;
-webkit-box-shadow: 0 0 18px #ffb515;
}
to {
background-color: #fc9200;
-webkit-box-shadow: 0 0 9px #333;
}
}
div.pulse.yellow {
-webkit-animation-name: yellowPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes redPulse {
from {
background-color: #bc330d;
-webkit-box-shadow: 0 0 9px #333;
}
50% {
background-color: #e33100;
-webkit-box-shadow: 0 0 18px #e33100;
}
to {
background-color: #bc330d;
-webkit-box-shadow: 0 0 9px #333;
}
}
div.pulse.red {
-webkit-animation-name: redPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment