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

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

定义动画
调用动画

1. 如何定义动画

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

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

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

@keyframes 动画名称 {
	from {
		// 初始状态
	}
	to {
		// 结束状态
	}
}

2. 如何调用动画

调用动画要用到 animation-name 以及 animation-duration 属性，前者是要调用的动画的名字，后者是该动画要持续的时长。比如：

/* 第二步：使用动画 */
animation-name: move;
animation-duration: 1.3s;

这样就OK了。
最后附上实现开始需求的完成代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS动画的简单使用</title>
    <style>
        div {
            height: 300px;
            width: 300px;
            background-color: pink;
            /* 第二步：使用动画 */
            animation-name: move;
            animation-duration: 1.3s;
        }
        
        /* 第一步：定义动画 */ 
        @keyframes move {
            /* 初始状态 */
            0% {
                transform: translateX(0);
            }
            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>