使用HTML语言和CSS开发商业站点_利用CSS3制作网页动画

第9章   利用CSS3制作网页动画
一.CSS3变形
1.变形简介
CSS3变形是一些效果的集合，如平移，旋转，缩放，倾斜效果，每个效果都可以称为变形（transform）， 它们可以操控元素发生平移，旋转，缩放，倾斜等 变化。
语法：transform:[transform-function]*;
设置变形函数，可以是一个，也可以是多个，中间以空格分开。
translate（）:平移函数，基于X，Y坐标重新定义元素的位置。
scale（）：缩放函数，可以使任意元素对象尺寸发生变化。
rotate（）：旋转函数，取值是一个度数值。
skew（）：倾斜函数，取值是一个度数值。
CSS3 3D变形函数：translated3d()平移函数，scale3d()的缩放函数，rotate3d()旋转函数。
2.浏览器兼容性
具体哪个浏览器版本支持什么样的CSS属性，看http：//www.caniuse.com;
3.2D变形
（1）.2D位移
translate(tx,ty);
注意：当translate（）函数只有一个值的时候，则表示水平位移；如果只设置垂直位移；就必须设置第一个 参数为0，第二个值是垂直偏移量。
其它形式：translateX（tx）：
translatex（tx）：/*大小写都可以 Y轴也是同样的道理*/
（2）.2D缩放
scale（）函数能够用来缩放元素大小，该函数包含两个参数值，默认值为1.只有一个值时，第二个默 认值 和第一个相等。
语法：scale（sx，sy）或scale（sx）
scaleX（sx）：
scalex（sx）：/*大小写都可以 Y轴也是同样的道理*/
（3）.2D倾斜
语法：skew（ax，ay）或skew（ax）
（4）.2D旋转
rotate（）函数能够让元素在二维空间里绕着一个指定的角度旋转1，这个元素对象可以是行内元素也可以是块元素。
语法：rotate（a）；/*a的取值为正值，元素相对原来中心顺时针旋转......*/
rotate（）函数只是旋转，而不会改变元素的形状。skew（）函数是倾斜，元素不会旋转，会改变元素的形状。
二.CSS3过渡
CSS3中过渡（transition）和animations两种方法都可以实现动画交互效果。
1.过渡简介
transform呈现的是一种变形的结果，而transition呈现的是一种过渡，是一种动画转换的过程，如渐现，渐弱，动画快慢等。CSS3 transition的过渡功能更像是一种“黄油”，通过一些CSS的简单动作触发样式平滑过渡。
2.过渡属性的使用
语法：transition:[transition-property   transition-duration   transition-timing-function   transition-delay]*
transition-property:指定过渡或动态模拟的CSS属性。
transition-duration:指定完成过渡所需要的时间。
transiton-timing-function:指定过渡函数。
transiton-delay:指定过渡开始出现的延迟时间。（四个属性之间以空格分隔）
（1）过渡属性
  transition-property属性用来定义转换动画的CSS属性名称，常用属性：
IDENT：指定的CSS属性（width，height，background-color属性等）
all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all。
（2）过渡所需的时间
transition-duration属性用来定义转换动画的时间长度，即从设置从旧属性到新属性所花费的时间，单位为s。
（3）过渡动画函数
transition-timing-function属性用来指定浏览器的过渡速度，以及过渡期间的操作进展情况。
ease：元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢（默认值）。
linear：元素样式从初始状态过渡到终止状态时速度恒速（匀速）。
ease-in：元素样式从初始状态过渡到终止状态时速度越来越快（渐显效果）。
ease-out：元素样式从初始状态过渡到终止状态时速度越来越慢（渐隐效果）。
ease-in-out：元素样式从初始状态过渡到终止状态时速度先加速再减速（渐显渐隐效果）。
（4）过渡延迟时间
正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发。
负值：元素过渡效果会从该时间点开始显示，之前的动作被截断。
0：默认值，元素过渡效果立即执行。
3.过渡的触发机制
伪类触发：：hover，：active，：focus，：checked等
媒体查询：可以通过@media属性判断设备的尺寸，方向等。
JavaScript触发：用JavaScript脚本触发。
使用transition实现过渡动画的使用步骤
（1）在默认样式中声明元素的初始状态样式
        （2）声明过渡元素最终样式状态，如悬浮状态
（3）在默认样式中通过添加过渡函数，添加一些不同的样式。
三.CSS3动画
1.CSS3动画简介
transition和animation在实现动画的方式上的区别
（1）transition属性通过指定属性的初始状态和结束状态在两个状态之间进行平滑过渡的方式来实现动画。
（2）animation实现动画主要由两个部分组成
通过类似Flash动画的关键帧来声明一个动画。
在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果。
2.CSS3动画的使用过程
使用animation制作动画的步骤：
（1）通过关键帧（@keyframes）来声明一个动画。
（2）找到要设置动画的元素，并且调用关键帧声明的动画。
（1）设置关键帧
语法：@keyframes IDNET{
from{/*CSS样式写在这里*/}
percentage{/*CSS样式写在这里*/}
to{/*CSS样式写在这里*/}
     }
也可以将关键词from和to换成百分比，即：
@keyframes IDNET{
0%{/*CSS样式写在这里*/}
percentage{/*CSS样式写在这里*/}
100%{/*CSS样式写在这里*/}
     }
其中IDNET就是一个动画名称，percentage就是一个百分比，用来定义某个时间段的动画效果。
（2）调用关键帧
animation和transition的区别：
（1）transition实现动画需要触发一个事件（hover事件，active事件等）。
（2）animation可以在不触发任何事件的情况下也能随着时间的变化来改变元素的CSS属性值，
从而达到一种动画的效果。
语法：animation：animation-name animation-duration animation-timing-function animation-delay 
animation-iteration-count animation-direction animation-play-state
animation-fill-mode;
速记公式：动画名称 动画的播放时间 动画的播放方式 开始播放动画的时间 动画的播放次数（
 特殊值infinite，表示动画无限次播放） 动画的播放次数 动画的播放方向
（normal表示动画每次都是循环向前播放，alternate表示动画播放为偶数次则向前
播放，奇数次则向反方向播放） 动画的播放状态（paused将正在播放的动画停
下来，running将暂停的动画重新播放） 动画的时间外属性（定义在动画开始之前和结束
之后发生的操作。其取值为forwards表示动画在结束后继续应用最后关键帧
的位置，取值为backwards表示会在向元素应用动画样式时迅速应用动画的初始帧，取值
为both表示元素动画同时具有forwords和backwards的效果） 。