// animating icons // -------------------------- .@{fa-css-prefix}-spin { animation-name: fa-spin; animation-direction: ~'var(--@{fa-css-prefix}-spin-direction, normal)'; animation-duration: ~'var(--@{fa-css-prefix}-spin-duration, 2s)'; animation-iteration-count: ~'var(--@{fa-css-prefix}-spin-iteration-count, infinite)'; animation-timing-function: ~'var(--@{fa-css-prefix}-spin-timing, linear)'; } .@{fa-css-prefix}-spin-reverse { --@{fa-css-prefix}-spin-direction: reverse; } .@{fa-css-prefix}-pulse, .@{fa-css-prefix}-spin-pulse { animation-name: fa-spin; animation-direction: ~'var(--@{fa-css-prefix}-spin-direction, normal)'; animation-duration: ~'var(--@{fa-css-prefix}-spin-duration, 1s)'; animation-iteration-count: ~'var(--@{fa-css-prefix}-spin-iteration-count, infinite)'; animation-timing-function: ~'var(--@{fa-css-prefix}-spin-timing, steps(8))'; } @keyframes fa-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }