kTip.css

/*---[ Misc ]-----------------------------------------------------------------*/

.kTip-container {
	-webkit-backface-visibility: hidden; /* WebKit fix for CSS animations */
}

/*---[ Styles ]---------------------------------------------------------------*/

/* Style: default modal */
.kT-modal .kTip-content {
	background-color: #fff;
	border: 1px solid #999;
	border-radius: 2px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
	overflow: auto;
	position: relative;
}

/* Style: default tooltip */
.kT-tooltip .kTip-content {
	background-color: #fff;
	border: 1px solid #999;
	border-radius: 2px;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.kT-tooltip .kTip-arrow-shadow {
	border-color: #888;
}

/*---[ Animations (daneden.me/animate) ]------------------------------------- */

/* fadeIn */
@keyframes kTip-fadeIn {
	  0% { opacity: 0; }
	100% { opacity: 1; }
}

/* fadeInDown */
@keyframes kTip-fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* fadeOut */
@keyframes kTip-fadeOut {
	  0% { opacity: 1; }
	100% { opacity: 0; }
}

/* fadeOutDown */
@keyframes kTip-fadeOutDown {
	0% {
		opacity: 1;
		transform: translateY(0);
	}
	100% {
		opacity: 0;
		transform: translateY(20px);
	}
}

/* flipIn */
@keyframes kTip-flipIn {
	0% {
		transform: perspective(1000px) rotateX(-30deg);
		opacity: 0;
	}

	100% {
		transform: perspective(1000px) rotateX(0deg);
		opacity: 1;
	}
}

/* flipOut */
@keyframes kTip-flipOut {
	0% {
		opacity: 1;
		transform: perspective(1000px) rotateX(0deg);
	}

	100% {
		opacity: 0;
		transform: perspective(1000px) rotateX(-30deg);
	}
}