利用CSS3制作网页动画

如何在网页中实现动画效果动态图片

flashjavascriptcss3变形是一些效果的集合如平移 旋转 缩放 倾斜效果每个效果都可以称为变形（transfrom）

它们可以分别操控元素发生平移、旋转、缩放、倾斜等变换语法transform：[transfrom-function]*;

变形函数translate（）：平移函数，基于X Y坐标重新定位元素位置scale（）：

缩放函数，可以是元素对象尺寸放生变换rotate（）：旋转函数，取值是一个度数skew（）：

倾斜函数，取值是一个度数值2D的位移translate（tx, ty）tx:X轴（横坐标）移动的向量长度ty:Y轴（纵坐标） 移动的向量长度

2D缩放scale（sx,sy）sx:X轴（横坐标）方向的缩放量sy:Y轴（纵坐标）高度方向的缩放量scale（）函数可以只接受一个值，也可以接受两个值，只有一个值时，第二个默认和第一个值相等

2D倾斜语法skew{ax,ay}ax:水平方向（X轴）的倾斜角度ay:水平方向（Y轴）的倾斜角度

2D旋转语法rotate（a）;参数a单位使用deg表示参数a取正值时元素相对原来中心顺时针旋转 rotate（）函数只是旋转，而不会改变元素形状skew（）函数是倾斜，元素不会旋转，会改变元素形状

css3过渡 语法transition:{transition-property transition-duration transition-timing-function transition-delay}

transition-property:过渡或动态模拟

css属性transition-duration完成过渡需要的时间

transition-timing-function 指定过渡函数

transition-delay过渡开始出现的延迟时间

过渡属性（transition-property）定义转换的css的属性名称IDEBT

指定css属性width height background-color 属性等all

指定所有元素支持transition-property属性样式，一般为了方便都是用all过渡所需的时间（transition-duration）定义转换动画时间长度，

即从设置就属性到换新属性所花费的时间。单位秒（s）过度动画的函数（transition-timing-function）指定浏览器的过渡速度 以及过渡期间的操作进展情况通过给过渡添加一个函数来指定动画快慢速度ease 速度由快到慢（默认值）liner：速度恒速（匀速运动）ease-in：速度越来越快（渐显效果）ease-out：速度越来越慢（渐隐效果）ease-in-out速度先加速在减速（渐显渐隐效果）延迟的时间（transition-delay）指定一个动画开始执行的时间，

当改变元素属性值后多长时间去执行过渡效果正值 元素过渡效果不会立即触发，当过了设置时间值才会被触发负值 元素过渡效果会从该时间点开始显示，之前的动作被截断0默认值，元素过渡效果立即执行过渡的触发机制伪类触发：hover：active：focus：checked

媒体查询：通过@media属性判断设备尺寸方向等JavaScript：

用JavaScript脚本触发使用transition实现过渡动画使用步骤在默认样式中声明元素的初始样式声明过渡元素最终状态样式，如悬浮状态在默认样式中通过添加过渡函数，添加一些不同样式

css动画animation实现动画主要两个部分组成通过类似flsah

动画的关键帧来声明一个动画在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果设置关键帧

@keyframes IDENT｛

from｛ｃｓｓ样式写在这里｝

percentage｛ｃｓｓ样式写在这里｝

to{css样式在这里}

｝

css3动画制作步骤设置关键帧

@keyframes IDENT{

from {/*css样式写在这*/}

percentage{/*css样式写在这里*/}

to{/*css写在着在这*/}

}

也可以将关键字from和to换成百分比

@keyframes IDENT{

0% {/*css样式写在这*/}

percentage{/*css样式写在这里*/}

0%{/*css写在着在这*/}

}

其中IDENT就是一个动画名，可以取任意定义的动画名称，当然语义化·一点重要。percentage就是一个百分比，用来定义某个时间的动画效果

例子：

@keyframes spread{

0% {{width：0；}

33%{{width：23px；}

66%{{width：46px；}

100%{width：69px；}

}

上面代码通过@keyframes声明了一个名为spread的动画，它的动画从0%开始到100%是结束，同时还经历33%和66%两个过程。简单来说，这个名叫spead的动画一共有四个关键帧

@keyframes是实现动画必不可少的一个属性，可是浏览器对@keyframes的兼容性影响到动画能在那个浏览器下运行，下面是他在各个主流浏览器下的支持情况：

属性名	IE	Firefox	Chrome	Opera	Safari
@keyframes	10+	5.0+	4.0+	4.0+	12.0+

调用关键帧：

在CSS3中animation属性可以调用@keyframes声明的动画。animation属性类似transition属性，他们都是随着时间的改变来改变元素的属性值，它们的区别：

1.transition实现动画需要触发一个事,（hover事件、active事件等）

2.animation可以在不触发任何事件的情况下也能随着时间的变化·来改变元素的CSS属性值，从而达到一种动画效果

例如：

animation：spread 2s linear；

-webkit-animation：spread 2s linear；

-moz-animation：spread 2s linear；

-o-animation：spread 2s linear；

animation的语法和其他几个常用的属性

animation;animation-name   animation-duration  animation-timing-functionanimat       ion-delayanimation   teration-count  animation-direction   animation-play-state   animation-fill-mode；

animation：动画化名称  动画的播放时间  动画的播放方式  开始播放动画的时间  动画的播放次数  动画的播放方向  动画的播放态度  动画时间外属性

animation-name ：是由@keyframes创建的动画名称

animation-teration-count ：动画的播放次数，通常指为整数，默认值为1，表示动画执行一次。还有一个特殊值infinite，表示动画无限次播放

animation-direction;动画播放的方向 主要有两个值 ，normal表示动画每次循环向前播放，alternate，表示动画播放为偶数次则向前播放，奇数次则反方向播放

animation-play-state：动画的播放状态 running将暂停的动画上播放，paused将正在播放的元素动画停下来

animation-fill-mode：定义在动画开始之前和结束之后发生的操作