面试题--CSS动画的妙用

<template>
	<view>
		<!-- 写一个程序，让三个button按不同速率向右移动，触碰到浏览器边缘
		 时返回，持续这种效果-->
		<button class="btn red"></button>
		<button class="btn yellow"></button>
		<button class="btn blue"></button>
		<!-- 定义公共类是为了复用css样式，
		定义私有类是为了调整animation的参数，
		以此来实现不同速率的运动 -->
	</view>
</template>
<style>
	.btn {
		width: 100rpx;
		height: 40rpx;
		margin: 10rpx;
	}
	@keyframes late{
		/*@keyframes是声明动画的关键字，late是动画名
		  0% 意味开始运动的第一帧，
		  100%意味运动的最后一帧。
		  50%的作用是触碰屏幕右侧，实现回弹。
		*/
		0%{transform:translateX(0);}
		/*这里用到了一个CSS 函数， calc，意味计算，此内置方法可直接使用
		  120rpx 包含了 button自身的宽度100rpx，以及屏幕左右两侧的留白（约20rpx）
		  计算后的结果是button可以移动的最远距离，即屏幕右侧。
		*/	
		50%{transform:translateX(calc(100% - 120rpx));}
		100%{transform:translateX(0);}
	}
	.red {
		background-color: red;
		/*调用自定义动画，参数依次为：动画名，持续时长，循环次数*/
		animation: late 3s infinite;
	}
	.yellow {
		background-color: yellow;
		/*因持续时长不同，有3s走完全程，有4s走完全程，故而速率不同*/
		animation: late 4s infinite;
	}
	.blue {
		background-color: blue;
		/*还可以调整移动速率及动画延迟，顺序如下：
		  动画名，持续时长，匀速运动，仅发动两次，延迟1s后发动*/
		animation: late 5s linear 2 1s;
	}
</style>