Css3学习笔记（六）：动画

1.TransitionsTransitions功能通过将元素的某个属性从一个属性在指定的时间内平滑过渡到另一个属性从而实现动画功能。式：transi 1. TransitionsTransitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值从而实现动画功能。格式：transition: property duration timing-functionproperty表示指定的属性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-functionlinear：在动画开始时到结束时以同样的速度进行改变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;}