@-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(.95, .95, .95) rotate3d(0, 0, 1, -10deg); transform: scale3d(.95, .95, .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(.95, .95, .95) rotate3d(0, 0, 1, -10deg); transform: scale3d(.95, .95, .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); } } @keyframes beat { to { -webkit-transform: scale(1.4); transform: scale(1.4); } } @keyframes bounce { from { -webkit-transform: scale(1.1,1); transform: scale(1.1,1); } 25% { -webkit-transform: scale(0.9,1) translateY(-.25em); transform: scale(0.9,1) translateY(-.25em); } 50% { -webkit-transform: scale(1.1,0.9); transform: scale(1.1,0.9); } 75% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 87.5% { -webkit-transform: scale(1, 1) translateY(-.1em); transform: scale(1, 1) translateY(-.1em); } to { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes breathe { from{ -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50%{ -webkit-transform: scale(1.4); transform: scale(1.4); opacity: 0.4; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes wiggle { from{ -webkit-transform: translateX(0); transform:translateX(0); } 30%{ -webkit-transform: translateX(0.075em); transform: translateX(0.075em); } 60%{ -webkit-transform: translateX(-0.075em); transform: translateX(-0.075em); } 75%{ -webkit-transform: translateX(0.025em); transform: translateX(0.025em); } 90%{ -webkit-transform: translateX(-0.025em); transform: translateX(-0.025em); } to { -webkit-transform: translateX(0); transform:translateX(0); } } .bx-wiggle{ -webkit-animation: wiggle 1s infinite; animation: wiggle 1s infinite; animation-timing-function:cubic-bezier(.23,.57,.79,.58); } .bx-wiggle-hover:hover{ -webkit-animation: wiggle 1s infinite; animation: wiggle 1s infinite; animation-timing-function:cubic-bezier(.23,.57,.79,.58); } .bx-breathe{ -webkit-animation: breathe 3s infinite; animation: breathe 3s infinite ease-in-out; } .bx-breathe-hover:hover { -webkit-animation: breathe 3s infinite; animation: breathe 3s infinite ease-in-out; } .bx-bounce{ -webkit-animation: bounce 1s infinite; animation: bounce 1s infinite; animation-timing-function: cubic-bezier(.98,.97,.64,1.62); } .bx-bounce-hover:hover { -webkit-animation: bounce 1s infinite; animation: bounce 1s infinite; animation-timing-function: cubic-bezier(.98,.97,.64,1.62); } .bx-beat { -webkit-animation: beat .5s infinite alternate; animation: beat .5s infinite alternate; animation-timing-function: cubic-bezier(.19,.96,.65,1); transform-origin: center; } .bx-spin { -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } .bx-spin-hover:hover { -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } .bx-tada { -webkit-animation: tada 1.5s ease infinite; animation: tada 1.5s ease infinite; } .bx-tada-hover:hover { -webkit-animation: tada 1.5s ease infinite; animation: tada 1.5s ease infinite; } .bx-flashing { -webkit-animation: flashing 1.5s infinite linear; animation: flashing 1.5s infinite linear; } .bx-flashing-hover:hover { -webkit-animation: flashing 1.5s infinite linear; animation: flashing 1.5s infinite linear; } .bx-burst { -webkit-animation: burst 1.5s infinite linear; animation: burst 1.5s infinite linear; } .bx-burst-hover:hover { -webkit-animation: burst 1.5s infinite linear; animation: burst 1.5s infinite linear; } .bx-fade-up { -webkit-animation: fade-up 1.5s infinite linear; animation: fade-up 1.5s infinite linear; } .bx-fade-up-hover:hover { -webkit-animation: fade-up 1.5s infinite linear; animation: fade-up 1.5s infinite linear; } .bx-fade-down { -webkit-animation: fade-down 1.5s infinite linear; animation: fade-down 1.5s infinite linear; } .bx-fade-down-hover:hover { -webkit-animation: fade-down 1.5s infinite linear; animation: fade-down 1.5s infinite linear; } .bx-fade-left { -webkit-animation: fade-left 1.5s infinite linear; animation: fade-left 1.5s infinite linear; } .bx-fade-left-hover:hover { -webkit-animation: fade-left 1.5s infinite linear; animation: fade-left 1.5s infinite linear; } .bx-fade-right { -webkit-animation: fade-right 1.5s infinite linear; animation: fade-right 1.5s infinite linear; } .bx-fade-right-hover:hover { -webkit-animation: fade-right 1.5s infinite linear; animation: fade-right 1.5s infinite linear; }