/* WRENCHING */ @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%,100%{transform:rotate(0deg)} } .faa-wrench.animated, .faa-wrench.animated-hover:hover, .faa-parent.animated-hover:hover > .faa-wrench { animation: wrench 2.5s ease infinite; transform-origin-x: 90%; transform-origin-y: 35%; transform-origin-z: initial; } .faa-wrench.animated.faa-fast, .faa-wrench.animated-hover.faa-fast:hover, .faa-parent.animated-hover:hover > .faa-wrench.faa-fast { animation: wrench 1.2s ease infinite; } .faa-wrench.animated.faa-slow, .faa-wrench.animated-hover.faa-slow:hover, .faa-parent.animated-hover:hover > .faa-wrench.faa-slow { animation: wrench 3.7s ease infinite; } /* BELL */ @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%,100%{transform:rotate(0deg)} } .faa-ring.animated, .faa-ring.animated-hover:hover, .faa-parent.animated-hover:hover > .faa-ring { animation: ring 2s ease infinite; transform-origin-x: 50%; transform-origin-y: 0px; transform-origin-z: initial; } .faa-ring.animated.faa-fast, .faa-ring.animated-hover.faa-fast:hover, .faa-parent.animated-hover:hover > .faa-ring.faa-fast { animation: ring 1s ease infinite; } .faa-ring.animated.faa-slow, .faa-ring.animated-hover.faa-slow:hover, .faa-parent.animated-hover:hover > .faa-ring.faa-slow { animation: ring 3s ease infinite; } /* VERTICAL */ @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%,100%{transform:translate(0,0)} } .faa-vertical.animated, .faa-vertical.animated-hover:hover, .faa-parent.animated-hover:hover > .faa-vertical { animation: vertical 2s ease infinite; } .faa-vertical.animated.faa-fast, .faa-vertical.animated-hover.faa-fast:hover, .faa-parent.animated-hover:hover > .faa-vertical.faa-fast { animation: vertical 1s ease infinite; } .faa-vertical.animated.faa-slow, .faa-vertical.animated-hover.faa-slow:hover, .faa-parent.animated-hover:hover > .faa-vertical.faa-slow { animation: vertical 4s ease infinite; } /* HORIZONTAL */ @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%,100%{transform:translate(0,0)} } .faa-horizontal.animated, .faa-horizontal.animated-hover:hover, .faa-parent.animated-hover:hover > .faa-horizontal { animation: horizontal 2s ease infinite; } .faa-horizontal.animated.faa-fast, .faa-horizontal.animated-hover.faa-fast:hover, .faa-parent.animated-hover:hover > .faa-horizontal.faa-fast { animation: horizontal 1s ease infinite; } .faa-horizontal.animated.faa-slow, .faa-horizontal.animated-hover.faa-slow:hover, .faa-parent.animated-hover:hover > .faa-horizontal.faa-slow { animation: horizontal 3s ease infinite; } /* FLASHING */ @keyframes flash { 0%,100%,50%{opacity:1} 25%,75%{opacity:0} } .faa-flash.animated, .faa-flash.animated-hover:hover, .faa-parent.animated-hover:hover > .faa-flash { animation: flash 2s ease infinite; } .faa-flash.animated.faa-fast, .faa-flash.animated-hover.faa-fast:hover, .faa-parent.animated-hover:hover > .faa-flash.faa-fast { animation: flash 1s ease infinite; } .faa-flash.animated.faa-slow, .faa-flash.animated-hover.faa-slow:hover, .faa-parent.animated-hover:hover > .faa-flash.faa-slow { animation: flash 3s ease infinite; } /* BOUNCE */ @keyframes bounce { 0%,10%,20%,50%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-15px)} 60%{transform:translateY(-15px)} } .faa-bounce.animated, .faa-bounce.animated-hover:hover, .faa-parent.animated-hover:hover > .faa-bounce { animation: bounce 2s ease infinite; } .faa-bounce.animated.faa-fast, .faa-bounce.animated-hover.faa-fast:hover, .faa-parent.animated-hover:hover > .faa-bounce.faa-fast { animation: bounce 1s ease infinite; } .faa-bounce.animated.faa-slow, .faa-bounce.animated-hover.faa-slow:hover, .faa-parent.animated-hover:hover > .faa-bounce.faa-slow { animation: bounce 3s ease infinite; } /* SPIN */ @keyframes spin{ 0%{transform:rotate(0deg)} 100%{transform:rotate(359deg)} } .faa-spin.animated, .faa-spin.animated-hover:hover, .faa-parent.animated-hover:hover > .faa-spin { animation: spin 1.5s linear infinite; } .faa-spin.animated.faa-fast, .faa-spin.animated-hover.faa-fast:hover, .faa-parent.animated-hover:hover > .faa-spin.faa-fast { animation: spin 0.7s linear infinite; } .faa-spin.animated.faa-slow, .faa-spin.animated-hover.faa-slow:hover, .faa-parent.animated-hover:hover > .faa-spin.faa-slow { animation: spin 2.2s linear infinite; } /* FLOAT */ @keyframes float{ 0%{transform: translateY(0)} 50%{transform: translateY(-6px)} 100%{transform: translateY(0)} } .faa-float.animated, .faa-float.animated-hover:hover, .faa-parent.animated-hover:hover > .faa-float { animation: float 2s linear infinite; } .faa-float.animated.faa-fast, .faa-float.animated-hover.faa-fast:hover, .faa-parent.animated-hover:hover > .faa-float.faa-fast { animation: float 1s linear infinite; } .faa-float.animated.faa-slow, .faa-float.animated-hover.faa-slow:hover, .faa-parent.animated-hover:hover > .faa-float.faa-slow { animation: float 3s linear infinite; } /* PULSE */ @keyframes pulse { 0% {transform: scale(1.1)} 50% {transform: scale(0.8)} 100% {transform: scale(1.1)} } .faa-pulse.animated, .faa-pulse.animated-hover:hover, .faa-parent.animated-hover:hover > .faa-pulse { animation: pulse 2s linear infinite; } .faa-pulse.animated.faa-fast, .faa-pulse.animated-hover.faa-fast:hover, .faa-parent.animated-hover:hover > .faa-pulse.faa-fast { animation: pulse 1s linear infinite; } .faa-pulse.animated.faa-slow, .faa-pulse.animated-hover.faa-slow:hover, .faa-parent.animated-hover:hover > .faa-pulse.faa-slow { animation: pulse 3s linear infinite; } /* SHAKE */ .faa-shake.animated, .faa-shake.animated-hover:hover, .faa-parent.animated-hover:hover > .faa-shake { animation: wrench 2.5s ease infinite; } .faa-shake.animated.faa-fast, .faa-shake.animated-hover.faa-fast:hover, .faa-parent.animated-hover:hover > .faa-shake.faa-fast { animation: wrench 1.2s ease infinite; } .faa-shake.animated.faa-slow, .faa-shake.animated-hover.faa-slow:hover, .faa-parent.animated-hover:hover > .faa-shake.faa-slow { animation: wrench 3.7s ease infinite; } /* TADA */ @keyframes tada { 0% {transform: scale(1)} 10%,20% {transform:scale(.9) rotate(-8deg);} 30%,50%,70% {transform:scale(1.3) rotate(8deg)} 40%,60% {transform:scale(1.3) rotate(-8deg)} 80%,100% {transform:scale(1) rotate(0)} } .faa-tada.animated, .faa-tada.animated-hover:hover, .faa-parent.animated-hover:hover > .faa-tada { animation: tada 2s linear infinite; } .faa-tada.animated.faa-fast, .faa-tada.animated-hover.faa-fast:hover, .faa-parent.animated-hover:hover > .faa-tada.faa-fast { animation: tada 1s linear infinite; } .faa-tada.animated.faa-slow, .faa-tada.animated-hover.faa-slow:hover, .faa-parent.animated-hover:hover > .faa-tada.faa-slow { animation: tada 3s linear infinite; } /* PASSING */ @keyframes passing { 0% {transform:translateX(-50%); opacity:0} 50% {transform:translateX(0%); opacity:1} 100% {transform:translateX(50%); opacity:0} } .faa-passing.animated, .faa-passing.animated-hover:hover, .faa-parent.animated-hover:hover > .faa-passing { animation: passing 2s linear infinite; } .faa-passing.animated.faa-fast, .faa-passing.animated-hover.faa-fast:hover, .faa-parent.animated-hover:hover > .faa-passing.faa-fast { animation: passing 1s linear infinite; } .faa-passing.animated.faa-slow, .faa-passing.animated-hover.faa-slow:hover, .faa-parent.animated-hover:hover > .faa-passing.faa-slow { animation: passing 3s linear infinite; } /* PASSING REVERSE */ @keyframes passing-reverse { 0% {transform:translateX(50%); opacity:0} 50% {transform:translateX(0%); opacity:1} 100% {transform:translateX(-50%); opacity:0} } .faa-passing-reverse.animated, .faa-passing-reverse.animated-hover:hover, .faa-parent.animated-hover:hover > .faa-passing-reverse { animation: passing-reverse 2s linear infinite; } .faa-passing-reverse.animated.faa-fast, .faa-passing-reverse.animated-hover.faa-fast:hover, .faa-parent.animated-hover:hover > .faa-passing-reverse.faa-fast { animation: passing-reverse 1s linear infinite; } .faa-passing-reverse.animated.faa-slow, .faa-passing-reverse.animated-hover.faa-slow:hover, .faa-parent.animated-hover:hover > .faa-passing-reverse.faa-slow { animation: passing-reverse 3s linear infinite; } /* BURST */ @keyframes burst { 0% {opacity:.6} 50% {transform:scale(1.8);opacity:0} 100%{opacity:0} } .faa-burst.animated, .faa-burst.animated-hover:hover, .faa-parent.animated-hover:hover > .faa-burst { animation: burst 2s infinite linear } .faa-burst.animated.faa-fast, .faa-burst.animated-hover.faa-fast:hover, .faa-parent.animated-hover:hover > .faa-burst.faa-fast { animation: burst 1s infinite linear } .faa-burst.animated.faa-slow, .faa-burst.animated-hover.faa-slow:hover, .faa-parent.animated-hover:hover > .faa-burst.faa-slow { animation: burst 3s infinite linear } /* FALLING */ @keyframes falling { 0% {transform:translateY(-50%); opacity:0} 50% {transform:translateY(0%); opacity:1} 100% {transform:translateY(50%); opacity:0} } .faa-falling.animated, .faa-falling.animated-hover:hover, .faa-parent.animated-hover:hover > .faa-falling { animation: falling 2s linear infinite; } .faa-falling.animated.faa-fast, .faa-falling.animated-hover.faa-fast:hover, .faa-parent.animated-hover:hover > .faa-falling.faa-fast { animation: falling 1s linear infinite; } .faa-falling.animated.faa-slow, .faa-falling.animated-hover.faa-slow:hover, .faa-parent.animated-hover:hover > .faa-falling.faa-slow { animation: falling 3s linear infinite; } /* RISING */ @keyframes rising { 0% {transform:translateY(50%); opacity:0} 50% {transform:translateY(0%); opacity:1} 100% {transform:translateY(-50%); opacity:0} } .faa-rising.animated, .faa-rising.animated-hover:hover, .faa-parent.animated-hover:hover > .faa-rising { animation: rising 2s linear infinite; } .faa-rising.animated.faa-fast, .faa-rising.animated-hover.faa-fast:hover, .faa-parent.animated-hover:hover > .faa-rising.faa-fast { animation: rising 1s linear infinite; } .faa-rising.animated.faa-slow, .faa-rising.animated-hover.faa-slow:hover, .faa-parent.animated-hover:hover > .faa-rising.faa-slow { animation: rising 3s linear infinite; }