你的位置:首页 > 软件开发 > 网页设计 > css3新增动画

css3新增动画

发布时间:2017-09-22 15:00:09
1、transiition过渡:样式改变就会执行transition(1)格式:transiition:1s width linear,2s 1s height;(2)参数:transition-property 要运动的样式 (all || [attr] || no ...

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 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 暂停 )

 

原标题:css3新增动画

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。