【前端】CSS3--动画animation的基本使用，3分钟快速实现一个小动画

3分钟快速实现一个小动画。
需求是：当我打开页面的时候，会有一个300*300的粉色的正方形从左边移动到右边。
首先我们来看看CSS3是怎样使用动画的，可以大致分为两步：

1. 定义动画
2. 调用动画

1. 如何定义动画

定义动画需要用到 @keyframes 关键字，他的格式是下面这样的：

@keyframes 动画名称 {
   
	0% {
   
		// 初始状态
	}
	100% {
   
		// 结束状态
	}
}

其中0%和100%可以用from和to代替，也就是：