animation.css in Icon API 8
Same filename and directory in other branches
/* Animation example, for spinners */ .animate-spin { -moz-animation: spin 2s infinite linear; -o-animation: spin 2s infinite linear; -webkit-animation: spin 2s infinite linear; animation: spin 2s infinite linear; display: inline-block; } @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(359deg); -o-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @-webkit-keyframes spin { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(359deg); -o-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @-o-keyframes spin { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(359deg); -o-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @-ms-keyframes spin { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(359deg); -o-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes spin { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(359deg); -o-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
File
css/animation.cssView source
- /*
- Animation example, for spinners
- */
- .animate-spin {
- -moz-animation: spin 2s infinite linear;
- -o-animation: spin 2s infinite linear;
- -webkit-animation: spin 2s infinite linear;
- animation: spin 2s infinite linear;
- display: inline-block;
- }
- @-moz-keyframes spin {
- 0% {
- -moz-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
-
- 100% {
- -moz-transform: rotate(359deg);
- -o-transform: rotate(359deg);
- -webkit-transform: rotate(359deg);
- transform: rotate(359deg);
- }
- }
- @-webkit-keyframes spin {
- 0% {
- -moz-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
-
- 100% {
- -moz-transform: rotate(359deg);
- -o-transform: rotate(359deg);
- -webkit-transform: rotate(359deg);
- transform: rotate(359deg);
- }
- }
- @-o-keyframes spin {
- 0% {
- -moz-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
-
- 100% {
- -moz-transform: rotate(359deg);
- -o-transform: rotate(359deg);
- -webkit-transform: rotate(359deg);
- transform: rotate(359deg);
- }
- }
- @-ms-keyframes spin {
- 0% {
- -moz-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
-
- 100% {
- -moz-transform: rotate(359deg);
- -o-transform: rotate(359deg);
- -webkit-transform: rotate(359deg);
- transform: rotate(359deg);
- }
- }
- @keyframes spin {
- 0% {
- -moz-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
-
- 100% {
- -moz-transform: rotate(359deg);
- -o-transform: rotate(359deg);
- -webkit-transform: rotate(359deg);
- transform: rotate(359deg);
- }
- }