Skip to content

Instantly share code, notes, and snippets.

@Shugabuga
Created June 14, 2017 16:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Shugabuga/e34caaa419a019b9c5c1346d2336714a to your computer and use it in GitHub Desktop.
Save Shugabuga/e34caaa419a019b9c5c1346d2336714a to your computer and use it in GitHub Desktop.
Fidget Spinner animation in CSS
#spinner {
background:url('https://i.imgur.com/klnTf3g.png');
width:100px;
height:100px;
background-size:contain;
}
@keyframes spin {
from {
transform: rotate(0deg)scaleX(1)rotateZ(0deg)
}
to {
transform: rotate(0deg)scaleX(1)rotateZ(360deg)
}
}
.slowest {animation:spin 5s infinite linear;}
.slow {animation:spin 3s infinite linear;}
.normal {animation:spin 2s infinite linear;}
.fast {animation:spin 1s infinite linear;}
.fastest {animation:spin 0.5s infinite linear;}
.insane {animation:spin 0.1s infinite linear;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment