animation的一些动画

<template>
	<view class="container">
		<view class="arrow">上下浮动</view>
		<view class="getIn">渐入</view>
		<view class="getOut">渐出</view>
		<view class="slowlyOut">缓慢渐出</view>
		<view class="graduallyOut">向上渐出</view>
		<view class="share-btn">砍一刀</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},

	};
</script>

<style scoped lang='scss'>
	.container {
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		padding: 0rpx 1rpx;
		background: #ffffff;
	}

	.btn {
		width: 445rpx;
		height: 76rpx;
		margin-left: 100rpx;
		margin-bottom: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		font-family: SourceHanSansCN-Bold;
		font-weight: 700;
		font-size: 32rpx;
		color: #A64311;
		background-image: linear-gradient(180deg, #FDDA8E 0%, #FAB355 100%);
		border-radius: 21rpx;
		letter-spacing: 1px;
	}

	/* 上下浮动start */
	@keyframes arrow {
		from {
			transform: translate(0, 0)
		}

		to {
			transform: translate(0, 12rpx)
		}
	}

	.arrow {
		@extend .btn;
		margin-top: 50rpx;
		animation: arrow 1.3s ease-in-out 2.7s infinite alternate;
	}

	/* 上下浮动end */

	/* 淡入淡出start */
	@keyframes fadeIn {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

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

		100% {
			opacity: 0;
		}
	}

	/* 进入动画 */
	.getIn {
		@extend .btn;
		animation: fadeIn 1s 1;
	}

	/* 消失动画 */
	.getOut {
		@extend .btn;
		animation: fadeOut 1s 1;
	}

	/* 淡入淡出end */

	/* 向上淡出start */
	@keyframes fade {
		0% {
			opacity: 1;
		}

		40% {
			opacity: 0.75;
		}

		50% {
			opacity: 0.5;
		}

		75% {
			opacity: 0.3;
		}

		100% {
			opacity: 0;
		}

		from {
			transform: translate(0, 0)
		}

		to {
			transform: translate(0, -100rpx)
		}
	}

	.graduallyOut {
		@extend .btn;
		/* // animation: fade 10s 0s infinite; */
		animation-name: fade;
		/* 规定需要绑定到选择器的 keyframe 名称。。 */
		animation-duration: 2s;
		/* 规定完成动画所花费的时间，以秒或毫秒计。 */
		animation-timing-function: ease-out;
		/* 规定动画的速度曲线。 */
		animation-delay: 0.4s;
		/* 规定在动画开始之前的延迟。 */
		animation-iteration-count: infinite;
		/* 规定动画应该播放的次数。forwards：一次   infinite：一直重复*/
		animation-direction: normal;
		/* 规定是否应该轮流反向播放动画。 */
	}

	/* 向上淡出end */


	/* 淡入淡出start */
	@keyframes fadin {
		0% {
			opacity: 0;
			transform: scale(0.5);
		}

		100% {
			opacity: 1;
			transform: scale(1);
		}
	}

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

		100% {
			opacity: 0;
		}
	}

	.slowlyOut {
		@extend .btn;
		animation: transparantAnimation 4s ease-in-out 1;
	}

	/* 淡入淡出end */


	/* 按钮放大start */
	.share-btn {
		@extend .btn;
		animation: scaleSize 2s infinite;
	}

	@keyframes scaleSize {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.2);
		}

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

	/* 按钮放大end */
</style>