Skip to content

Instantly share code, notes, and snippets.

@Valid
Created February 1, 2016 06:08
Show Gist options
  • Save Valid/c688fa6d5d1ad36a2d42 to your computer and use it in GitHub Desktop.
Save Valid/c688fa6d5d1ad36a2d42 to your computer and use it in GitHub Desktop.
/r/SandersForPresident "hack" css animation
@keyframes spin {
0% {
transform: rotate(0deg);
background-color: red;
border-color: red;
font: red
}
12% {
transform: rotate(45deg);
background-color: orange;
border-color: violet;
font: violet
}
25% {
transform: rotate(90deg);
background-color: yellow;
border-color: indigo;
font: indigo
}
37% {
transform: rotate(135deg);
background-color: green;
border-color: blue;
font: blue
}
50% {
transform: rotate(180deg);
background-color: blue;
border-color: green;
font: green
}
62% {
transform: rotate(225deg);
background-color: indigo;
border-color: yellow;
font: yellow
}
75% {
transform: rotate(270deg);
background-color: violet;
border-color: orange;
font: orange
}
87% {
transform: rotate(315deg);
background-color: indigo;
border-color: red;
font: red
}
100% {
transform: rotate(359deg);
background-color: red;
border-color: red;
font: red
}
}
@keyframes oppositespin {
0% {
-webkit-transform: rotate(359deg)
}
100% {
-webkit-transform: rotate(1deg)
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(359deg)
}
}
* {
font-size: 100%;
border-radius: 500px;
border: 2px solid black;
animation: spin 10s steps(360) infinite!important;
-webkit-animation: spin 10s steps(360) infinite!important
}
a {
animation: oppositespin 5s steps(30) infinite;
-webkit-animation: oppositespin 5s steps(30) infinite
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment