/* WRENCHING */ @-moz-keyframes wrench { 0% { -moz-transform: rotate(-12deg) } 8% { -moz-transform: rotate(12deg) } 10% { -moz-transform: rotate(24deg) } 18% { -moz-transform: rotate(-24deg) } 20% { -moz-transform: rotate(-24deg) } 28% { -moz-transform: rotate(24deg) } 30% { -moz-transform: rotate(24deg) } 38% { -moz-transform: rotate(-24deg) } 40% { -moz-transform: rotate(-24deg) } 48% { -moz-transform: rotate(24deg) } 50% { -moz-transform: rotate(24deg) } 58% { -moz-transform: rotate(-24deg) } 60% { -moz-transform: rotate(-24deg) } 68% { -moz-transform: rotate(24deg) } 75% { -moz-transform: rotate(0deg) } } @-webkit-keyframes wrench { 0% { -webkit-transform: rotate(-12deg) } 8% { -webkit-transform: rotate(12deg) } 10% { -webkit-transform: rotate(24deg) } 18% { -webkit-transform: rotate(-24deg) } 20% { -webkit-transform: rotate(-24deg) } 28% { -webkit-transform: rotate(24deg) } 30% { -webkit-transform: rotate(24deg) } 38% { -webkit-transform: rotate(-24deg) } 40% { -webkit-transform: rotate(-24deg) } 48% { -webkit-transform: rotate(24deg) } 50% { -webkit-transform: rotate(24deg) } 58% { -webkit-transform: rotate(-24deg) } 60% { -webkit-transform: rotate(-24deg) } 68% { -webkit-transform: rotate(24deg) } 75% { -webkit-transform: rotate(0deg) } } @-o-keyframes wrench { 0% { -o-transform: rotate(-12deg) } 8% { -o-transform: rotate(12deg) } 10% { -o-transform: rotate(24deg) } 18% { -o-transform: rotate(-24deg) } 20% { -o-transform: rotate(-24deg) } 28% { -o-transform: rotate(24deg) } 30% { -o-transform: rotate(24deg) } 38% { -o-transform: rotate(-24deg) } 40% { -o-transform: rotate(-24deg) } 48% { -o-transform: rotate(24deg) } 50% { -o-transform: rotate(24deg) } 58% { -o-transform: rotate(-24deg) } 60% { -o-transform: rotate(-24deg) } 68% { -o-transform: rotate(24deg) } 75% { -o-transform: rotate(0deg) } } @-ms-keyframes wrench { 0% { -ms-transform: rotate(-12deg) } 8% { -ms-transform: rotate(12deg) } 10% { -ms-transform: rotate(24deg) } 18% { -ms-transform: rotate(-24deg) } 20% { -ms-transform: rotate(-24deg) } 28% { -ms-transform: rotate(24deg) } 30% { -ms-transform: rotate(24deg) } 38% { -ms-transform: rotate(-24deg) } 40% { -ms-transform: rotate(-24deg) } 48% { -ms-transform: rotate(24deg) } 50% { -ms-transform: rotate(24deg) } 58% { -ms-transform: rotate(-24deg) } 60% { -ms-transform: rotate(-24deg) } 68% { -ms-transform: rotate(24deg) } 75% { -ms-transform: rotate(0deg) } } @keyframes wrench { 0% { transform: rotate(-12deg) } 8% { transform: rotate(12deg) } 10% { transform: rotate(24deg) } 18% { transform: rotate(-24deg) } 20% { transform: rotate(-24deg) } 28% { transform: rotate(24deg) } 30% { transform: rotate(24deg) } 38% { transform: rotate(-24deg) } 40% { transform: rotate(-24deg) } 48% { transform: rotate(24deg) } 50% { transform: rotate(24deg) } 58% { transform: rotate(-24deg) } 60% { transform: rotate(-24deg) } 68% { transform: rotate(24deg) } 75% { transform: rotate(0deg) } } .faa-wrench.animated, .faa-wrench.animated-hover:hover { -moz-animation: wrench 2.5s ease infinite; -moz-transform-origin-x: 90%; -moz-transform-origin-y: 35%; -moz-transform-origin-z: initial; -webkit-animation: wrench 2.5s ease infinite; -webkit-transform-origin-x: 90%; -webkit-transform-origin-y: 35%; -webkit-transform-origin-z: initial; -ms-animation: wrench 2.5s ease infinite; -ms-transform-origin-x: 90%; -ms-transform-origin-y: 35%; -ms-transform-origin-z: initial; animation: wrench 2.5s ease infinite; transform-origin-x: 90%; transform-origin-y: 35%; transform-origin-z: initial; } /* BELL */ @-moz-keyframes ring { 0% { -moz-transform: rotate(-15deg) } 2% { -moz-transform: rotate(15deg) } 4% { -moz-transform: rotate(-18deg) } 6% { -moz-transform: rotate(18deg) } 8% { -moz-transform: rotate(-22deg) } 10% { -moz-transform: rotate(22deg) } 12% { -moz-transform: rotate(-18deg) } 14% { -moz-transform: rotate(18deg) } 16% { -moz-transform: rotate(-12deg) } 18% { -moz-transform: rotate(12deg) } 20% { -moz-transform: rotate(0deg) } } @-webkit-keyframes ring { 0% { -webkit-transform: rotate(-15deg) } 2% { -webkit-transform: rotate(15deg) } 4% { -webkit-transform: rotate(-18deg) } 6% { -webkit-transform: rotate(18deg) } 8% { -webkit-transform: rotate(-22deg) } 10% { -webkit-transform: rotate(22deg) } 12% { -webkit-transform: rotate(-18deg) } 14% { -webkit-transform: rotate(18deg) } 16% { -webkit-transform: rotate(-12deg) } 18% { -webkit-transform: rotate(12deg) } 20% { -webkit-transform: rotate(0deg) } } @-ms-keyframes ring { 0% { -ms-transform: rotate(-15deg) } 2% { -ms-transform: rotate(15deg) } 4% { -ms-transform: rotate(-18deg) } 6% { -ms-transform: rotate(18deg) } 8% { -ms-transform: rotate(-22deg) } 10% { -ms-transform: rotate(22deg) } 12% { -ms-transform: rotate(-18deg) } 14% { -ms-transform: rotate(18deg) } 16% { -ms-transform: rotate(-12deg) } 18% { -ms-transform: rotate(12deg) } 20% { -ms-transform: rotate(0deg) } } @keyframes ring { 0% { transform: rotate(-15deg) } 2% { transform: rotate(15deg) } 4% { transform: rotate(-18deg) } 6% { transform: rotate(18deg) } 8% { transform: rotate(-22deg) } 10% { transform: rotate(22deg) } 12% { transform: rotate(-18deg) } 14% { transform: rotate(18deg) } 16% { transform: rotate(-12deg) } 18% { transform: rotate(12deg) } 20% { transform: rotate(0deg) } } .faa-ring.animated, .faa-ring.animated-hover:hover { -moz-animation: ring 2s ease infinite; -moz-transform-origin-x: 50%; -moz-transform-origin-y: 0px; -moz-transform-origin-z: initial; -webkit-animation: ring 2s ease infinite; -webkit-transform-origin-x: 50%; -webkit-transform-origin-y: 0px; -webkit-transform-origin-z: initial; -ms-animation: ring 2s ease infinite; -ms-transform-origin-x: 50%; -ms-transform-origin-y: 0px; -ms-transform-origin-z: initial; animation: ring 2s ease infinite; transform-origin-x: 50%; transform-origin-y: 0px; transform-origin-z: initial; } /* VERTICAL */ @-moz-keyframes vertical { 0% { -moz-transform: translate(0, -3px) } 4% { -moz-transform: translate(0, 3px) } 8% { -moz-transform: translate(0, -3px) } 12% { -moz-transform: translate(0, 3px) } 16% { -moz-transform: translate(0, -3px) } 20% { -moz-transform: translate(0, 3px) } 22% { -moz-transform: translate(0, 0) } } @-webkit-keyframes vertical { 0% { -webkit-transform: translate(0, -3px) } 4% { -webkit-transform: translate(0, 3px) } 8% { -webkit-transform: translate(0, -3px) } 12% { -webkit-transform: translate(0, 3px) } 16% { -webkit-transform: translate(0, -3px) } 20% { -webkit-transform: translate(0, 3px) } 22% { -webkit-transform: translate(0, 0) } } @-ms-keyframes vertical { 0% { -ms-transform: translate(0, -3px) } 4% { -ms-transform: translate(0, 3px) } 8% { -ms-transform: translate(0, -3px) } 12% { -ms-transform: translate(0, 3px) } 16% { -ms-transform: translate(0, -3px) } 20% { -ms-transform: translate(0, 3px) } 22% { -ms-transform: translate(0, 0) } } @keyframes vertical { 0% { transform: translate(0, -3px) } 4% { transform: translate(0, 3px) } 8% { transform: translate(0, -3px) } 12% { transform: translate(0, 3px) } 16% { transform: translate(0, -3px) } 20% { transform: translate(0, 3px) } 22% { transform: translate(0, 0) } } .faa-vertical.animated, .faa-vertical.animated-hover:hover { -moz-animation: vertical 2s ease infinite; -webkit-animation: vertical 2s ease infinite; -ms-animation: vertical 2s ease infinite; animation: vertical 2s ease infinite; } /* HORIZONTAL */ @-moz-keyframes horizontal { 0% { -moz-transform: translate(0, 0) } 6% { -moz-transform: translate(5px, 0) } 12% { -moz-transform: translate(0, 0) } 18% { -moz-transform: translate(5px, 0) } 24% { -moz-transform: translate(0, 0) } 30% { -moz-transform: translate(5px, 0) } 36% { -moz-transform: translate(0, 0) } } @-webkit-keyframes horizontal { 0% { -webkit-transform: translate(0, 0) } 6% { -webkit-transform: translate(5px, 0) } 12% { -webkit-transform: translate(0, 0) } 18% { -webkit-transform: translate(5px, 0) } 24% { -webkit-transform: translate(0, 0) } 30% { -webkit-transform: translate(5px, 0) } 36% { -webkit-transform: translate(0, 0) } } @-ms-keyframes horizontal { 0% { -ms-transform: translate(0, 0) } 6% { -ms-transform: translate(5px, 0) } 12% { -ms-transform: translate(0, 0) } 18% { -ms-transform: translate(5px, 0) } 24% { -ms-transform: translate(0, 0) } 30% { -ms-transform: translate(5px, 0) } 36% { -ms-transform: translate(0, 0) } } @keyframes horizontal { 0% { transform: translate(0, 0) } 6% { transform: translate(5px, 0) } 12% { transform: translate(0, 0) } 18% { transform: translate(5px, 0) } 24% { transform: translate(0, 0) } 30% { transform: translate(5px, 0) } 36% { transform: translate(0, 0) } } .faa-horizontal.animated, .faa-horizontal.animated-hover:hover { -moz-animation: horizontal 2s ease infinite; -webkit-animation: horizontal 2s ease infinite; -ms-animation: horizontal 2s ease infinite; animation: horizontal 2s ease infinite; } /* FLASHING */ @-moz-keyframes flash { 0%, 100%, 50% { opacity: 1 } 25%, 75% { opacity: 0 } } @-webkit-keyframes flash { 0%, 100%, 50% { opacity: 1 } 25%, 75% { opacity: 0 } } @-ms-keyframes flash { 0%, 100%, 50% { opacity: 1 } 25%, 75% { opacity: 0 } } @keyframes flash { 0%, 100%, 50% { opacity: 1 } 25%, 75% { opacity: 0 } } .faa-flash.animated, .faa-flash.animated-hover:hover { -moz-animation: flash 2s ease infinite; -webkit-animation: flash 2s ease infinite; -ms-animation: flash 2s ease infinite; animation: flash 2s ease infinite; } /* BOUNCE */ @-moz-keyframes bounce { 0%, 100%, 20%, 50%, 80% { -moz-transform: translateY(0) } 40% { -moz-transform: translateY(-15px) } 60% { -moz-transform: translateY(-15px) } } @-webkit-keyframes bounce { 0%, 100%, 20%, 50%, 80% { -webkit-transform: translateY(0) } 40% { -webkit-transform: translateY(-15px) } 60% { -webkit-transform: translateY(-15px) } } @-ms-keyframes bounce { 0%, 100%, 20%, 50%, 80% { -ms-transform: translateY(0) } 40% { -ms-transform: translateY(-15px) } 60% { -ms-transform: translateY(-15px) } } @keyframes bounce { 0%, 10%, 20%, 50%, 80% { transform: translateY(0) } 40% { transform: translateY(-15px) } 60% { transform: translateY(-15px) } } .faa-bounce.animated, .faa-bounce.animated-hover:hover { -moz-animation: bounce 2s ease infinite; -webkit-animation: bounce 2s ease infinite; -ms-animation: bounce 2s ease infinite; animation: bounce 2s ease infinite; } /* SPIN */ @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg) } 100% { -moz-transform: rotate(359deg) } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg) } 100% { -webkit-transform: rotate(359deg) } } @-ms-keyframes spin { 0% { -ms-transform: rotate(0deg) } 100% { -ms-transform: rotate(359deg) } } @keyframes spin { 0% { transform: rotate(0deg) } 100% { transform: rotate(359deg) } } .faa-spin.animated, .faa-spin.animated-hover:hover { -moz-animation: spin 1.5s linear infinite; -webkit-animation: spin 1.5s linear infinite; -ms-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; } /* FLOAT */ @-moz-keyframes float { 0% { -moz-transform: translateY(0) } 50% { -moz-transform: translateY(-6px) } 100% { -moz-transform: translateY(0) } } @-webkit-keyframes float { 0% { -webkit-transform: translateY(0) } 50% { -webkit-transform: translateY(-6px) } 100% { -webkit-transform: translateY(0) } } @-ms-keyframes float { 0% { -ms-transform: translateY(0) } 50% { -ms-transform: translateY(-6px) } 100% { -ms-transform: translateY(0) } } @keyframes float { 0% { transform: translateY(0) } 50% { transform: translateY(-6px) } 100% { transform: translateY(0) } } .faa-float.animated, .faa-float.animated-hover:hover { - moz-animation: float 2s linear infinite; -webkit-animation: float 2s linear infinite; -ms-animation: float 2s linear infinite; animation: float 2s linear infinite; } /* PULSE */ @-moz-keyframes pulse { 0% { -moz-transform: scale(1.1) } 50% { -moz-transform: scale(0.8) } 100% { -moz-transform: scale(1) } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1) } 50% { -webkit-transform: scale(0.8) } 100% { -webkit-transform: scale(1) } } @-ms-keyframes pulse { 0% { -ms-transform: scale(1.1) } 50% { -ms-transform: scale(0.8) } 100% { -ms-transform: scale(1) } } @keyframes pulse { 0% { transform: scale(1.1) } 50% { transform: scale(0.8) } 100% { transform: scale(1) } } .faa-pulse.animated, .faa-pulse.animated-hover:hover { -moz-animation: pulse 2s linear infinite; -webkit-animation: pulse 2s linear infinite; -ms-animation: pulse 2s linear infinite; animation: pulse 2s linear infinite; } /* SHAKE */ .faa-shake.animated, .faa-shake.animated-hover:hover { -webkit-animation: wrench 2.5s ease infinite; }