利用css3中的animation来实现简单的动画效果

	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	开发工具与关键技术：html+css3
	作者：李伙
	撰写时间：2019年1月17日
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	在学习前端过程中，如果我们想实现一些简单的动画效果，我们可以利用css3中的animation来实现。
	css3为animation提供了以下几个属性：
	animation-name:动画名称
	animation-duration:动画运动时间
	animation-timing-function:动画速度曲线
	animation-delay:动画延迟时间
	animation-iteration-count:动画播放次数（可以是具体次数，无数次为infinite）
animation是一个复合属性，其具体的格式为：
animation: 动画名称 动画运动时间 动画速度曲线 动画延迟时间 动画播放次数;
	keyframes(关键帧)：在css3中主要以“@ keyframes”开头，后面紧跟着动画名称与“{}”，
“{}”里面主要是一些不同时间段需要执行的样式，“{}”里面可以在“0%”到“100%”之间创建多个百分比，
不同百分比中可以给需要有动画效果的元素设置不同的样式。
animation中的animation-name(动画名称)需要和keyframes上的函数名一致
keyframes的格式如下：

```
@keyframes animation{
	0%{
		background: red;/*设置不同的样式*/
	}
	50%{
		background: blue;/*设置不同的样式*/
	}
	100%{
		background: green;/*设置不同的样式*/
	}
}
```

下面是一个例子；
首先设置好几个div，如下：

```
<div class="sky">
	<div class="cloud_one"></div>
	<div class="cloud_two"></div>
	<div class="cloud_three"></div>
</div>
```

然后再给每个div设置不同的样式，如下：

```
.sky{
	height: 500px;
	background: #007fd5;
	overflow: hidden;
	position: relative;
	animation: sky1 50s ease-out infinite;
}
.cloud_one,.cloud_two,.cloud_three{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 300%;
}
.cloud_one{
	background: url(../img/cloud_one.png);
	animation: clouds 50s linear infinite;
}
.cloud_two{
	background: url(../img/cloud_two.png);
	animation: clouds 60s linear infinite;
}
.cloud_three{
	background: url(../img/cloud_three.png);
	animation: clouds 80s linear infinite;
}
@keyframes sky1{
	0%{
		background: #007fd5;
		color: #007fd5;
	}
	50%{
		background: #000;
		color: #a3d9ff;
	}
	100%{
		background: #007fd5;
		color: #007fd5;
	}
}
@keyframes clouds{
	0%{
		left: 0;
	}
	100%{
		left: -200%;
	}
}
```

这样一个简单的纯css3云彩动画效果就完成了。