第12章过渡变形和动画.docVIP

第12章 CSS的高级应用 CSS 3中增加了许多革命性的创新功能，如添加了文本阴影、圆角边框、多列布局和盒布局等相关的静态样式属性。除此之外CSS 3中还添加了实现动态变化的样式属性，使用这些属性可以实现元素过渡、平移、移动以及缩放等效果，本节将详细介绍这些属性。 通过本章的学习，读者可以对CSS 3中的过渡、转换和动画有所了解，并且能够熟练地使用相关属性实现过渡、移动、旋转、倾斜和缩放等特效。 本章学习要点： 掌握过渡、平移和动画效果实现的浏览器支持情况 掌握相关属性实现过渡效果的方法 掌握transition属性的使用方法 掌握如何使用transform属性实现平移、缩放、倾斜和旋转操作 掌握如何实现更改元素原点坐标的效果 熟悉设置动画关键帧的语法 掌握与动画相关的属性及使用方法 12.1 过渡 过渡可以动态改变颜色的值，以动画的形式从一种颜色过渡到另外一种。一般情况下如果要改变一个样式属性的值，变化就会立即发生且中间没有过渡状态，但是CSS 3中提供的相关属性解决了这个问题。 12.1.1 浏览器支持情况 CSS 3中与过渡相关的属性有多个，如transtion-duration、transtion-property、transtion-delay和transtion-timing等。目前所有主流的浏览器都不提供对这些属性的支持，但是可以通过扩展属性（即添加前缀）来实