码迷,mamicode.com
首页 > Web开发 > 详细

css3动画基本

时间:2016-01-06 14:08:47      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:

Transition:过渡

1>过渡属性:

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/

过渡属性应用实例:

  <style>

    div{width:100px;height:100px;background:blue;transition:1s;} //参数一:过渡时间为1秒,鼠标划过一1秒内div原样式发生改变(过渡时间,可以是秒-s,或者是毫秒ms)

    div{width:100px;height:100px;background:blue;transition:1s 2s;} //参数二:延迟2秒,执行过渡1秒的效果(延迟时间)

    div{width:100px;height:100px;background:blue;transition:1s 2s width;} //参数三:只让width属性发生1秒过渡(要运动的样式) 注:运动样式,使用‘ , ‘隔开,可以一次写多个控制;如:1s width,2s height,3s background;

    div{width:100px;height:100px;background:blue;transition:1s 2s width ease-out;} //参数四:width发生1秒过渡,以减速形式过渡 (运动形式)

    div:hover{width:200px;height:200px;background:red;}

     </style>

  <div></div>

2>过渡完成事件:

(a).监听事件:
Webkit内核: obj.addEventListener(‘webkitTransitionEnd‘,function(){},false);
firefox: obj.addEventListener(‘transitionend‘,function(){},false);

(b).删除监听事件:

Webkit内核: obj.removeEventListener(‘webkitTransitionEnd‘,function(){},false);
firefox: obj.removeEventListener(‘transitionend‘,function(){},false);

完成事件应用示例:

  <style>.box{width:100px;height:100px;background:red; transition:1s width;}</style>

  <divclass="box" id="box"></div>
  <script>
    var oBox=document.getElementById("box");
    oBox.onclick=function(){
      this.style.width=this.offsetWidth+100+"px";
    };
    addEnd(oBox,function(){ //当过渡完成后,触发addEnd事件       
      
alert("end");
    });
    function addEnd(obj,fn) {

      obj.addEventListener(‘WebkitTransitionEnd‘,fn,false); //监听过渡后的事件
      
obj.addEventListener(‘transitionend‘,fn,false);
    }

    function removeEnd(obj,fn) {       
      obj.removeEventListener(‘WebkitTransitionEnd‘,fn,false); //删除监听过渡后的事件      
      
obj.removeEventListener(‘transitionend‘,fn,false);   
    }

  </script>

2D变换

transform:

1>transform属性:

rotate()  旋转函数 取值度数     deg  度数
Transform-origin 旋转的基点
skew() 倾斜函数 取值度数
   skewX()  skewY()
scale() 缩放函数 取值 正数、负数和小数
   scaleX()  scaleY()
translate() 位移函数
   translateX()   translateY()

属性应用实例:

  <style>

    div{width:100px;height:100px;background:red;transition:2s;} //注意:transform必须要配合transition使用,否则看不到效果

    div:hover{-webkit-transform:roate(360deg);} //旋转360度

    div:hover{-webkit-transform:skewX(45deg);} //横向倾斜45度  skewY:为纵向倾斜;

      div:hover{-webkit-transform:scale(1.1);} //放大1.1倍  scale:横向和纵向同时放大;scaleX:只横向放大; scaleY:只纵向放大

    div:hover{-webkit-transform:translate(200px);} //横向位移200px  接收两个参数,第一个是横向,第二个是纵向

     </style>

  <div></div>

2>Transform 执行顺序问题 — 后写先执行

3>matrix(a,b,c,d,e,f) 矩阵函数
     a.通过矩阵实现缩放
    x轴缩放 a=x*a    c=x*c     e=x*e;
    y轴缩放 b=y*b   d=y*d     f=y*f;
  b.通过矩阵实现位移
    x轴位移: e=e+x
    y轴位移: f=f+y
  c.通过矩阵实现倾斜
    x轴倾斜: c=Math.tan(xDeg/180*Math.PI)
    y轴倾斜: b=Math.tan(yDeg/180*Math.PI)

  d.通过矩阵实现旋转
    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);
4>变换兼容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

css3动画基本

标签:

原文地址:http://www.cnblogs.com/nemoDuoo/p/5105053.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!