动画
动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。
动画分两步：1、先定义动画；2、再调用定义好的动画
效果为：一只奔跑的大白熊从屏幕左面奔跑至屏幕中间（可直接下载源码，请从资源中免费下载）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #ccc;
}
div {
position: absolute;
/* 熊奔跑的图片分为8个，计算一个熊的宽度，设置宽与高让其只能展示一个熊 */
width: 200px;
height: 100px;
/* 距离页面底部为0，让熊在底部奔跑 */
bottom: 0;
/* 注意路径 */
background: url(bear.png) no-repeat;
/* 调用定义好的动画：动画名 时间 步长 播放的次数，动画名 时间 速度曲线 动画结束后的状态 */
animation: bear 1.2s steps(8) infinite, move 3s linear forwards;
}
/* 定义动画，白熊自己的状态 */
@keyframes bear {
/* 开始状态 */
0% {
background-position: 0 0;
}
/* 结束状态 */
100% {
background-position: -1600px 0;
}
}
/* 白熊从屏幕左面移动到屏幕中间 */
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>