签到+1动画（@keyframes）

最近写的积分签到功能，需要在签到时，向上飘起一个+n的动画，记录在此：

<div class="grow_count" @animationend="integralCountAnimationEnd">+{{ integralCount(index) }}</div>
// animationend事件：动画结束后的回调事件（可以在此将div隐藏）

.grow_count {
						position: absolute;
						top: 0;
						color: #607cfa;
						animation-name: integralCount;    //动画名（必写）
						animation-duration: 1s;  //  动画持续时间（必写）
						animation-timing-function: ease-out; // (动画运动速度)
						animation-iteration-count: 1; // （动画运动次数）
					}

@keyframes integralCount {  // 与上面的动画名对应
	0% {
		opacity: 0.5;
		transform: translateY(0);
	}

	50% {
		opacity: 1;
		transform: translateY(-18px);
	}

	100% {
		opacity: 1;
		transform: translateY(-18px);
	}
}