Skip to content

Instantly share code, notes, and snippets.

@sulmanen
Created August 21, 2013 14:04
Show Gist options
  • Save sulmanen/6294881 to your computer and use it in GitHub Desktop.
Save sulmanen/6294881 to your computer and use it in GitHub Desktop.
.circle {
width: 20px;
height: 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.animate-red {
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: jobrunnig-red;
animation-direction:alternate;
-webkit-animation-direction:alternate;
-webkit-animation-play-state: running;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: jobrunnig-red;
}
.animate-blue {
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: jobrunnig-blue;
animation-direction:alternate;
-webkit-animation-direction:alternate;
-webkit-animation-play-state: running;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: jobrunnig-blue;
}
@keyframes jobrunnig-blue {
from {
background-color: blue;
}
to {
background-color: #ffffff;
}
}
@-webkit-keyframes jobrunnig-blue {
from {
background-color: blue;
}
to {
background-color: #ffffff;
}
}
@keyframes jobrunnig-red {
from {
background-color: red;
}
to {
background-color: #ffffff;
}
}
@-webkit-keyframes jobrunnig-red {
from {
background-color: red;
}
to {
background-color: #ffffff;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment