css3新增动画

1、transiition过渡:样式改变就会执行transition

（1）格式：transiition：1s width linear,2s 1s height;

（2）参数：

• transition-property  要运动的样式  （all || [attr] || none）

• transition-duration 运动时间

• transition-delay 延迟时间

• transition-timing-function 运动形式

ease：（逐渐变慢）默认值

linear：（匀速）

ease-in：(加速)

ease-out：（减速）

ease-in-out：（先加速后减速）

cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）http://matthewlein.com/ceaser/

(3)过渡完成事件

• Webkit内核： obj.addEventListener('webkitTransitionEnd',function(){

 

• },false);
• firefox: obj.addEventListener('transitionend',function(){

 

• },false); 

2、transform2D

（1）格式：transiition：1s width linear,2s 1s height;

（2）参数：

• rotate() 旋转函数 取值度数

deg 度数

• skew() 倾斜函数 取值度数

skewX()

skewY()

• scale() 缩放函数 取值 正数、负数和小数

scaleX()

scaleY()

• translate() 位移函数

translateX()

translateY()

• transform-origin 旋转的基点（left top左上角）

（3）注意：Transform 执行顺序问题 — 后写先执行

（4）matrix(a,b,c,d,e,f) 矩阵函数

　　默认：matrix（1,0,0,1,0,0）

• 通过矩阵实现缩放

x轴缩放 a=x*a c=x*c e=x*e;

y轴缩放 b=y*b d=y*d f=y*f;

• 通过矩阵实现位移(ie下没有)

x轴位移: e=e+x

y轴位移: f=f+y

• 通过矩阵实现倾斜

x轴倾斜: c=Math.tan(xDeg/180*Math.PI)

y轴倾斜: b=Math.tan(yDeg/180*Math.PI)

• 通过矩阵实现旋转

a=Math.cos(deg/180*Math.PI);

b=Math.sin(deg/180*Math.PI);

c=-Math.sin(deg/180*Math.PI);

d=Math.cos(deg/180*Math.PI);

（5）变换兼容IE9以下IE版本只能通过矩阵来实现 

• filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
• IE下的矩阵没有E和F两个参数 M11==a; M12==c; M21==b; M22==d

（6）IE下基点修正

obj.style.left=(obj.parentNode.offsetWidth-obj.offsetWidth)/2+"px";
obj.style.top=(obj.parentNode.offsetHeight-obj.offsetHeight)/2+"px";

3、transform3D

（1）参数

• transform-style（preserve-3d） 建立3D空间
• Perspective 景深
• Perspective- origin 景深基点
• Transform 新增函数

rotateX()：水平

rotateY()：竖直

rotateZ()：垂直于屏幕

translateZ()：正值放大，负值缩小

scaleZ()

4、animation

 

（1）关键帧的时间单位

• 数字：0%、25%、100%等
• 字符：from(0%)、to(100%)

 

（2）格式

 

• @keyframes 动画名称 {

　　　　　　　　动画状态

　　}

• @keyframes miaov_test {

　　　　　　　　 from { background:red; }

　　　　　　　　 to { background:green; }

　　 }

（3）参数

• 必要属性

animation-name 动画名称（关键帧名称）

animation-duration 动画持续时间

例如： -webkit-animation-name: ‘m'; -webkit-animation-duration: 4s;

• 可选属性

• animation-timing-function 动画运动形式

 

linear 匀速。

 

 

ease 缓冲。

 

 

ease-in 由慢到快。

 

 

ease-out 由快到慢。

 

 

ease-in-out 由慢到快再到慢。

 

 

cubic-bezier(number, number, number, number)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

 

• animation-delay 动画延迟 只是第一次

• animation-iteration-count 重复次数——infinite为无限次

• animation-direction 播放前重置

 

动画是否重置后再开始播放

 

 

alternate 动画直接从上一次停止的位置开始执行

 

 

normal 动画第二次直接跳到0%的状态开始执行

 

• animation-play-state 播放状态（ running 播放 和paused 暂停 ）

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有