properly namespacing spin animation #3885

This commit is contained in:
Dave Gandy 2014-08-20 12:03:31 -04:00
parent cf3ebc280a
commit b3f34507b2
6 changed files with 41 additions and 41 deletions

16
css/font-awesome.css vendored
View file

@ -78,12 +78,12 @@
margin-left: .3em; margin-left: .3em;
} }
.fa-spin { .fa-spin {
-webkit-animation: spin 2s infinite linear; -webkit-animation: fa-spin 2s infinite linear;
-moz-animation: spin 2s infinite linear; -moz-animation: fa-spin 2s infinite linear;
-o-animation: spin 2s infinite linear; -o-animation: fa-spin 2s infinite linear;
animation: spin 2s infinite linear; animation: fa-spin 2s infinite linear;
} }
@-moz-keyframes spin { @-moz-keyframes fa-spin {
0% { 0% {
-moz-transform: rotate(0deg); -moz-transform: rotate(0deg);
} }
@ -91,7 +91,7 @@
-moz-transform: rotate(359deg); -moz-transform: rotate(359deg);
} }
} }
@-webkit-keyframes spin { @-webkit-keyframes fa-spin {
0% { 0% {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
} }
@ -99,7 +99,7 @@
-webkit-transform: rotate(359deg); -webkit-transform: rotate(359deg);
} }
} }
@-o-keyframes spin { @-o-keyframes fa-spin {
0% { 0% {
-o-transform: rotate(0deg); -o-transform: rotate(0deg);
} }
@ -107,7 +107,7 @@
-o-transform: rotate(359deg); -o-transform: rotate(359deg);
} }
} }
@keyframes spin { @keyframes fa-spin {
0% { 0% {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);

File diff suppressed because one or more lines are too long

View file

@ -2,25 +2,25 @@
// -------------------------- // --------------------------
.@{fa-css-prefix}-spin { .@{fa-css-prefix}-spin {
-webkit-animation: spin 2s infinite linear; -webkit-animation: fa-spin 2s infinite linear;
-moz-animation: spin 2s infinite linear; -moz-animation: fa-spin 2s infinite linear;
-o-animation: spin 2s infinite linear; -o-animation: fa-spin 2s infinite linear;
animation: spin 2s infinite linear; animation: fa-spin 2s infinite linear;
} }
@-moz-keyframes spin { @-moz-keyframes fa-spin {
0% { -moz-transform: rotate(0deg); } 0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(359deg); } 100% { -moz-transform: rotate(359deg); }
} }
@-webkit-keyframes spin { @-webkit-keyframes fa-spin {
0% { -webkit-transform: rotate(0deg); } 0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(359deg); } 100% { -webkit-transform: rotate(359deg); }
} }
@-o-keyframes spin { @-o-keyframes fa-spin {
0% { -o-transform: rotate(0deg); } 0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(359deg); } 100% { -o-transform: rotate(359deg); }
} }
@keyframes spin { @keyframes fa-spin {
0% { 0% {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);

View file

@ -2,25 +2,25 @@
// -------------------------- // --------------------------
.#{$fa-css-prefix}-spin { .#{$fa-css-prefix}-spin {
-webkit-animation: spin 2s infinite linear; -webkit-animation: fa-spin 2s infinite linear;
-moz-animation: spin 2s infinite linear; -moz-animation: fa-spin 2s infinite linear;
-o-animation: spin 2s infinite linear; -o-animation: fa-spin 2s infinite linear;
animation: spin 2s infinite linear; animation: fa-spin 2s infinite linear;
} }
@-moz-keyframes spin { @-moz-keyframes fa-spin {
0% { -moz-transform: rotate(0deg); } 0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(359deg); } 100% { -moz-transform: rotate(359deg); }
} }
@-webkit-keyframes spin { @-webkit-keyframes fa-spin {
0% { -webkit-transform: rotate(0deg); } 0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(359deg); } 100% { -webkit-transform: rotate(359deg); }
} }
@-o-keyframes spin { @-o-keyframes fa-spin {
0% { -o-transform: rotate(0deg); } 0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(359deg); } 100% { -o-transform: rotate(359deg); }
} }
@keyframes spin { @keyframes fa-spin {
0% { 0% {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);

View file

@ -5,25 +5,25 @@
// -------------------------- // --------------------------
.@{fa-css-prefix}-spin { .@{fa-css-prefix}-spin {
-webkit-animation: spin 2s infinite linear; -webkit-animation: fa-spin 2s infinite linear;
-moz-animation: spin 2s infinite linear; -moz-animation: fa-spin 2s infinite linear;
-o-animation: spin 2s infinite linear; -o-animation: fa-spin 2s infinite linear;
animation: spin 2s infinite linear; animation: fa-spin 2s infinite linear;
} }
@-moz-keyframes spin { @-moz-keyframes fa-spin {
0% { -moz-transform: rotate(0deg); } 0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(359deg); } 100% { -moz-transform: rotate(359deg); }
} }
@-webkit-keyframes spin { @-webkit-keyframes fa-spin {
0% { -webkit-transform: rotate(0deg); } 0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(359deg); } 100% { -webkit-transform: rotate(359deg); }
} }
@-o-keyframes spin { @-o-keyframes fa-spin {
0% { -o-transform: rotate(0deg); } 0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(359deg); } 100% { -o-transform: rotate(359deg); }
} }
@keyframes spin { @keyframes fa-spin {
0% { 0% {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);

View file

@ -5,25 +5,25 @@
// -------------------------- // --------------------------
.#{$fa-css-prefix}-spin { .#{$fa-css-prefix}-spin {
-webkit-animation: spin 2s infinite linear; -webkit-animation: fa-spin 2s infinite linear;
-moz-animation: spin 2s infinite linear; -moz-animation: fa-spin 2s infinite linear;
-o-animation: spin 2s infinite linear; -o-animation: fa-spin 2s infinite linear;
animation: spin 2s infinite linear; animation: fa-spin 2s infinite linear;
} }
@-moz-keyframes spin { @-moz-keyframes fa-spin {
0% { -moz-transform: rotate(0deg); } 0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(359deg); } 100% { -moz-transform: rotate(359deg); }
} }
@-webkit-keyframes spin { @-webkit-keyframes fa-spin {
0% { -webkit-transform: rotate(0deg); } 0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(359deg); } 100% { -webkit-transform: rotate(359deg); }
} }
@-o-keyframes spin { @-o-keyframes fa-spin {
0% { -o-transform: rotate(0deg); } 0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(359deg); } 100% { -o-transform: rotate(359deg); }
} }
@keyframes spin { @keyframes fa-spin {
0% { 0% {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);