Css3学习笔记（六）：动画

1. Transitions

Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值从而实现动画功能。
格式：
transition: property duration timing-function
property表示指定的属性
duration表示完成过渡的持续时间
timing-function表示执行过渡的方法

div{
	background-color:#880a00;
	transition: background-color 1s linear;
}
div:hover{
	background-color:#ffcc00;
}

2. Animation

用法和transition差不多，不过是需要指定关键帧keyframes。

@keyframes test5Animation{
	0%{
		background-color:#005103;
	}
	40%{
		background-color:#aa5103;
	}
	70%{
		background-color:#aa51ff;
	}
	100%{
		background-color:#510303;
	}
}
div[id="test5"]{
	background-color:#510303;
}
div[id="test5"]:hover{
	animation: test5Animation 5s linear;
}

最后，可以通过animation-literation-count:infinite来让动画无休止的运转下去。也可以这里指定播放次数。

3. 动画的实现方法介绍timing-function

linear：在动画开始时到结束时以同样的速度进行改变
ease-in：在动画开始时速度很慢，然后速度沿曲线加快
ease-out：在动画开始时速度很快，然后速度沿曲线放慢
ease：在动画开始时速度很慢，然后沿曲线加快，再沿曲线放慢
ease-in-out：在动画开始时速度很慢，然后沿曲线加快，再沿曲线放慢
实现网页淡入淡出效果：

@keyframes test5Animation{
	0%{
		opacity:0;
		background-color:#ffffff;
	}
	100%{
		opacity:1;
		background-color:#ffffff;
	}
}
body{
	animation: test5Animation 5s linear 1;
}