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>