利用CSS3制作网页动画

《利用CSS3制作网页动画》

一、CSS3变形
1.早期的动画和特效要依赖于图片、flash或者JavaScript来实现
2.CSS3提供了很多新特性，使得动画制作跟以前相比简单且高效了很多
3.CSS3动画分2D动画和3D动画，这里重点讲解2D动画，3D动画用法类似
4.transform：变化，改变，变形 transformer变形金刚
5.通过常用的变形函数，可以实现变形效果
6.translate：
a、平移，位移
b、translate(x,y)
c、x和y表示相对于自身的偏移量，效果和相对布局相同，值可正可负
d、translateX()表示只在x轴偏移，translateY()表示只在y轴偏移
e、translate(x)表示只偏移x方向
f、如果值为0表示不偏移
7.scale
a、缩放
b、scale(x,y)
c、x控制宽度的缩放，y控制高度缩放
d、只有一个值的时候，第二个值默认和第二个值相等
e、也可以通过scaleX(),scaleY()单独设置
f、x，y的值可以是0-0.99的任意值，表示缩小元素，也可以是1以上的值，表示放大倍数
8.skew
a、倾斜，斜的
b、skew(x,y)
c、x控制水平方向的倾斜角度，y控制垂直方向的倾斜角度，可正可负
d、单位是deg，度数，即角度的大小
e、skewX() /skewY()
9.rotate
a、旋转，沿着物体的中心点旋转
b、rotate(x)
c、单位是deg，度数，即角度的大小
d、如果x为正，则是顺时针旋转，如果x为负，则是逆时针旋转
10.一次可以使用多个变形函数，多个之间空格隔开

二、CSS3过渡transition
1.transition:过渡，转变
2.之前学习的transform呈现的是一种变形的结果
3.而transition呈现的是一种过渡，是一种动画转变的过程
4.transition-property:
a、指定需要呈现过渡效果的改变属