利用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、指定需要呈现过渡效果的改变属性
b、可以指定具体属性width、height、background等等，方便起见通常用all
5.transition-duration:
a、用来定义动画过渡的时间长度
b、单位是秒，用字母s表示：2s,并且单位不能省略
c、时间越短表示速度越快，可以有小数值：例如2.5s
6.transition-timing-function:
a、过渡动画函数
b、可选
c、指定一个函数来设置动画的快慢方式，即初始状态过渡到终止状态时候的效果
d、ease：默认值，速度由快到慢，逐渐变慢，ease:缓解，延缓
e、linear:速度恒速，即匀速运动
f、ease-in:进入的时候慢，后面速度越来越快
g、ease-out：进入的时候快，后面速度越来越慢
h、ease-in-out:慢——快——慢
7.transition-delay:
a、delay：延迟，推迟
b、设置过渡效果开始前的等待时间
c、单位是s，秒
d、默认值为0，说明没有任何等待，立即开始动画
e、此属性主要是防止用户的误操作，在等待时间内取消操作，就不会触发动画过渡效果
8.简便写法：
transition:过渡属性 过渡时间 过渡函数 延迟时间 （空格隔开，顺序无关）
9.过渡的触发机制：
a、伪类触发, :hover(悬停) /:active(激活) /:checked(选中) /:focus(获得焦点)
b、媒体查询，通过@media属性判断设备的尺寸、方向
c、JavaScritpt触发

三、CSS3动画animation
1.transition可以制作出动画效果，但是它只能设置动画的开始和结束，无法控制中间的过程
2.animation动画可以控制和设置动画的整个过程，类似于flash动画一样通过帧来控制
3.animation动画的使用过程
a、通过关键帧（keyframes）来声明一个动画
b、通过animation调用关键帧动画
4.通过@keyframes来声明动画，设置关键帧
a、关键帧是指根据需要在各个关键点设置预期的样式效果
b、关键帧的细粒度可以根据需要设置，动画复杂可以设置的细一些，动画简便可以少一些
c、语法1
@keyframes name1{
from { css样式 }
percentage{ css样式 }
to { css样式… }
}
d、语法2
@keyframes name2{
0%{ css样式… }
33%{ css样式…}
66%{ css样式…}
100%{ css样式…}
}
5.调用关键帧
a、animation-name:调用由@keyframes定义的动画名称
b、animation-duration:动画时长
a和b是必不可少的。
c、animation-timing-function:动画函数
d、animation-delay:动画延迟时间
e、animation-iteration-count:动画的播放次数，默认为1，infinite(表示无限无穷)
f、animation-direction:
1)默认值是normal，表示正向播放动画
2）reverse，表示反方向播放动画
3）alternate，交替播放，奇数正向，偶数逆向，与播放次数infinite联用
g、animation-play-state:动画的播放状态，播放running和暂停paused
h、animation-fill-mode:动画播放结束之后的操作
none:默认值，使得动画不会对动画等待和动画完成的元素样式产生改变
backwards:在动画等待的那段时间内，元素的样式将设置为动画第一帧的样式
forwards:在动画结束后，元素的样式设置为动画的最后一帧的样式
both:相当于同时配置了forwards和backwards
6.调用动画的简便写法：
animation:name duration function delay count direction;