.animated {
	animation-duration: 1s;
	animation-fill-mode: both;
}

// 显示
.shake {
	animation-name: shake;
}
@keyframes shake {
	0%,
	to {
		transform: translateZ(0);
	}

	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translate3d(-10px, 0, 0);
	}

	20%,
	40%,
	60%,
	80% {
		transform: translate3d(10px, 0, 0);
	}
}

// fade
.fadeIn {
	animation: fadeIn 1s;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.tada {
	animation-name: tada;
}
@keyframes tada {
	0% {
		transform: scaleX(1);
	}

	10%,
	20% {
		transform: scale3d(.9, .9, .9) rotate(-3deg);
	}

	30%,
	50%,
	70%,
	90% {
		transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
	}

	40%,
	60%,
	80% {
		transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
	}

	to {
		transform: scaleX(1);
	}
}

.wobble {
	animation-name: wobble;
}
@keyframes wobble {
	0% {
		transform: translateZ(0);
	}

	15% {
		transform: translate3d(-25%, 0, 0) rotate(-5deg);
	}

	30% {
		transform: translate3d(20%, 0, 0) rotate(3deg);
	}

	45% {
		transform: translate3d(-15%, 0, 0) rotate(-3deg);
	}

	60% {
		transform: translate3d(10%, 0, 0) rotate(2deg);
	}

	75% {
		transform: translate3d(-5%, 0, 0) rotate(-1deg);
	}

	to {
		transform: translateZ(0);
	}
}

.heartBeat {
	animation-name: heartBeat;
	animation-duration: 1.3s;
	animation-timing-function: ease-in-out;
}
@keyframes heartBeat {
	0% {
		transform: scale(1);
	}

	14% {
		transform: scale(1.3);
	}

	28% {
		transform: scale(1);
	}

	42% {
		transform: scale(1.3);
	}

	70% {
		transform: scale(1);
	}
}

// 消失
.fadeOut {
	animation-name: fadeOut;
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.bounceOut {
	animation-duration: .75s;
	animation-name: bounceOut;
}

@keyframes bounceOut {
	20% {
		transform: scale3d(.9, .9, .9);
	}

	50%,
	55% {
		opacity: 1;
		transform: scale3d(1.1, 1.1, 1.1);
	}

	to {
		opacity: 0;
		transform: scale3d(.3, .3, .3);
	}
}

.zoomOut {
	animation-name: zoomOut;
}
@keyframes zoomOut {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
		transform: scale3d(.3, .3, .3);
	}

	to {
		opacity: 0;
	}
}

.slideIn {
	animation: slideUpIn .6s;
}
.slideOut {
	animation: slideUpOut .6s;
}

@keyframes slideUpIn {
    0% {
        opacity: 0;
        transform-origin: 0% 0%;
        transform: scaleY(.8);
    }
    100% {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scaleY(1);
    }
}

@keyframes slideUpOut {
    0% {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scaleY(1);
    }
    100% {
        opacity: 0;
        transform-origin: 0% 0%;
        transform: scaleY(.8);
    }
}