@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @-webkit-keyframes burst { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 90% { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0; } } @keyframes burst { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 90% { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0; } } @-webkit-keyframes flashing { 0% { opacity: 1; } 45% { opacity: 0; } 90% { opacity: 1; } } @keyframes flashing { 0% { opacity: 1; } 45% { opacity: 0; } 90% { opacity: 1; } } @-webkit-keyframes fade-left { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 75% { -webkit-transform: translateX(-20px); transform: translateX(-20px); opacity: 0; } } @keyframes fade-left { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 75% { -webkit-transform: translateX(-20px); transform: translateX(-20px); opacity: 0; } } @-webkit-keyframes fade-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 75% { -webkit-transform: translateX(20px); transform: translateX(20px); opacity: 0; } } @keyframes fade-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 75% { -webkit-transform: translateX(20px); transform: translateX(20px); opacity: 0; } } @-webkit-keyframes fade-up { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 75% { -webkit-transform: translateY(-20px); transform: translateY(-20px); opacity: 0; } } @keyframes fade-up { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 75% { -webkit-transform: translateY(-20px); transform: translateY(-20px); opacity: 0; } } @-webkit-keyframes fade-down { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 75% { -webkit-transform: translateY(20px); transform: translateY(20px); opacity: 0; } } @keyframes fade-down { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 75% { -webkit-transform: translateY(20px); transform: translateY(20px); opacity: 0; } } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.95, 0.95, 0.95) rotate3d(0, 0, 1, -10deg); transform: scale3d(0.95, 0.95, 0.95) rotate3d(0, 0, 1, -10deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg); transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg); transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.95, 0.95, 0.95) rotate3d(0, 0, 1, -10deg); transform: scale3d(0.95, 0.95, 0.95) rotate3d(0, 0, 1, -10deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg); transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg); } 40%, 60%, 80% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .ti-spin { -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } .ti-spin-hover:hover { -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } .ti-tada { -webkit-animation: tada 1.5s ease infinite; animation: tada 1.5s ease infinite; } .ti-tada-hover:hover { -webkit-animation: tada 1.5s ease infinite; animation: tada 1.5s ease infinite; } .ti-flashing { -webkit-animation: flashing 1.5s infinite linear; animation: flashing 1.5s infinite linear; } .ti-flashing-hover:hover { -webkit-animation: flashing 1.5s infinite linear; animation: flashing 1.5s infinite linear; } .ti-burst { -webkit-animation: burst 1.5s infinite linear; animation: burst 1.5s infinite linear; } .ti-burst-hover:hover { -webkit-animation: burst 1.5s infinite linear; animation: burst 1.5s infinite linear; } .ti-fade-up { -webkit-animation: fade-up 1.5s infinite linear; animation: fade-up 1.5s infinite linear; } .ti-fade-up-hover:hover { -webkit-animation: fade-up 1.5s infinite linear; animation: fade-up 1.5s infinite linear; } .ti-fade-down { -webkit-animation: fade-down 1.5s infinite linear; animation: fade-down 1.5s infinite linear; } .ti-fade-down-hover:hover { -webkit-animation: fade-down 1.5s infinite linear; animation: fade-down 1.5s infinite linear; } .ti-fade-left { -webkit-animation: fade-left 1.5s infinite linear; animation: fade-left 1.5s infinite linear; } .ti-fade-left-hover:hover { -webkit-animation: fade-left 1.5s infinite linear; animation: fade-left 1.5s infinite linear; } .ti-fade-right { -webkit-animation: fade-right 1.5s infinite linear; animation: fade-right 1.5s infinite linear; } .ti-fade-right-hover:hover { -webkit-animation: fade-right 1.5s infinite linear; animation: fade-right 1.5s infinite linear; } .ti-xs { font-size: 1rem !important; } .ti-sm { font-size: 1.125rem !important; } .ti-md { font-size: 1.375rem !important; } .ti-lg { font-size: 1.5rem !important; } .ti-xl { font-size: 2.25rem !important; } .ti-10px { &, &:before { font-size: 10px; } } .ti-12px { &, &:before { font-size: 12px; } } .ti-14px { &, &:before { font-size: 14px; } } .ti-16px { &, &:before { font-size: 16px; } } .ti-18px { &, &:before { font-size: 18px; } } .ti-20px { &, &:before { font-size: 20px; } } .ti-22px { &, &:before { font-size: 22px; } } .ti-24px { &, &:before { font-size: 24px; } } .ti-26px { &, &:before { font-size: 26px; } } .ti-28px { &, &:before { font-size: 28px; } } .ti-30px { &, &:before { font-size: 30px; } } .ti-32px { &, &:before { font-size: 32px; } } .ti-36px { &, &:before { font-size: 36px; } } .ti-40px { &, &:before { font-size: 40px; } } .ti-42px { &, &:before { font-size: 42px; } } .ti-48px { &, &:before { font-size: 48px; } }