font-awesome-animation/dist/font-awesome-animation.css

/*!
 * font-awesome-animation - v0.0.2
 * https://github.com/l-lin/font-awesome-animation
 */
@-moz-keyframes wrenching {
	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 wrenching {
	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 wrenching {
	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 wrenching {
	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 wrenching {
	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)}
}
.wrenching-animation.animation, .wrenching-animation.animation-hover:hover {
	display: inline-block;
	-moz-animation: wrenching 2.5s ease 4;
	-moz-transform-origin-x: 90%;
	-moz-transform-origin-y: 35%;
	-moz-transform-origin-z: initial;

	-webkit-animation: wrenching 2.5s ease 4;
	-webkit-transform-origin-x: 90%;
	-webkit-transform-origin-y: 35%;
	-webkit-transform-origin-z: initial;

	-ms-animation: wrenching 2.5s ease 4;
	-ms-transform-origin-x: 90%;
	-ms-transform-origin-y: 35%;
	-ms-transform-origin-z: initial;

	animation: wrenching 2.5s ease 4;
	transform-origin-x: 90%;
	transform-origin-y: 35%;
	transform-origin-z: initial;
}

/* BELL */
@-moz-keyframes ringing {
	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 ringing {
	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 ringing {
	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 ringing {
	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)}
}
.ringing-animation.animation, .ringing-animation.animation-hover:hover {
	display: inline-block;
	-moz-animation: ringing 2s ease 5;
	-moz-transform-origin-x: 50%;
	-moz-transform-origin-y: 0px;
	-moz-transform-origin-z: initial;

	-webkit-animation: ringing 2s ease 5;
	-webkit-transform-origin-x: 50%;
	-webkit-transform-origin-y: 0px;
	-webkit-transform-origin-z: initial;

	-ms-animation: ringing 2s ease 5;
	-ms-transform-origin-x: 50%;
	-ms-transform-origin-y: 0px;
	-ms-transform-origin-z: initial;

	animation: ringing 2s ease 5;
	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)}
}
.vertical-animation.animation, .vertical-animation.animation-hover:hover {
	display: inline-block;
	-moz-animation: vertical 2s ease 5;
	-webkit-animation: vertical 2s ease 5;
	-ms-animation: vertical 2s ease 5;
	animation: vertical 2s ease 5;
}

/* 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)}
}
.horizontal-animation.animation, .horizontal-animation.animation-hover:hover {
	display:inline-block;
	-moz-animation: horizontal 2s ease 5;
	-webkit-animation: horizontal 2s ease 5;
	-ms-animation: horizontal 2s ease 5;
	animation: horizontal 2s ease 5;
}

/* 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}
}
.flash-animation.animation, .flash-animation.animation-hover:hover {
	display:inline-block;
	-moz-animation: flash 2s ease 5;
	-webkit-animation: flash 2s ease 5;
	-ms-animation: flash 2s ease 5;
	animation: flash 2s ease 5;
}