CSS3(三)

CSS3核心模块

transition 过渡动画

• transition-property 过渡属性 all|[attr]
• transition-duration 过渡时间
• transition-delay 延迟时间

• transition-timing-function 运动类型

  • ease：（逐渐变慢）默认值
  • linear：（匀速）
  • ease-in：(加速)
  • ease-out：（减速）
  • ease-in-out：（先加速后减速）
  • cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）
  • http://cubic-bezier.com/
    

     #div1:hover {        width: 200px;        height: 200px;/*     -webkit-transition-property: width,height;        transition-property: width,height;  !*过渡属性*!        -webkit-transition-duration: 1s,2s;        transition-duration: 1s,2s;  !*执行的过程时间*!        -webkit-transition-timing-function: linear;        transition-timing-function: linear;!*动画类型*!        -webkit-transition-delay: 0.5s;        transition-delay: 0.5s;!*动画延迟时间*!         transition:all 1s linear 0s;        */        -webkit-transition:width 1s linear 0s,height 2s linear 0s;        transition:width 1s linear 0s,height 2s linear 0s;    }

• webkit内核下： ele.addEventListener(‘webkitTransitionEnd’,function(){},false);
• 标准浏览器下:
  ele.addEventListener(‘transitionend’,function(){},false)
• transition 执行次数问题

transform 变型属性

• 元素变形的基准点:默认是元素的中心点； rotate，skew，scale可以改变元素变形的基准点，translate的基准点不会改变，就是元素的中心点

• rotate() 旋转函数

  • deg 度数
  • Transform-origin 旋转的基点

       #div1{        width: 200px;        height: 200px;        background: red;        margin: 200px auto;        -webkit-transition: transform 1s;        -moz-transition: transform 1s;        -ms-transition: transform 1s;        -o-transition: transform 1s;        transition: transform 1s;    }    #div1:hover{        transform: rotate(45deg);        -webkit-transition: transform 1s;        -moz-transition: transform 1s;        -ms-transition: transform 1s;        -o-transition: transform 1s;        transition: transform 1s;    }

• skew() 倾斜函数
  
  • skewX()正直向左边倾斜，负直向右边倾斜
  • skewY()正直向下边倾斜

• scale() 缩放函数 默认值是1

  • scaleX()
  • scaleY()

        #div1{        width: 200px;        height: 200px;        background: red;        margin: 200px auto;        -webkit-transition: transform 1s;        -moz-transition: transform 1s;        -ms-transition: transform 1s;        -o-transition: transform 1s;        transition: transform 1s;    }    #div1:hover{        /*transform: skewX(45deg) skewY(45deg);*/        /*transform: scaleY(0.5);*/        /*transform: scaleX(0.5);*/        transform: scale(0.5);        transform-origin:left ;        /*transform: translateY(50px) rotate(45deg);*/        -webkit-transition: transform 1s;        -moz-transition: transform 1s;        -ms-transition: transform 1s;        -o-transition: transform 1s;        transition: transform 1s;    }

• translate() 位移函数
  
  • translateX()
  • translateY()

animation 帧动画

关键帧——@keyframes

• 类似于flash
  
  • 定义动画在每个阶段的样式，即帧动画
• 关键帧的时间单位
  
  • 数字：0%、25%、100%等(设置某个时间段内的任意时间点的样式)
  • 字符：from(0%)、to(100%)
• 格式
  @keyframes 动画名称
  {
  动画状态
  }
• 必要属性
  
  • animation-name 动画名称（关键帧名称）
  • animation-duration 动画执行时间
    可选属性
    - 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 重复次数
  • animation-direction 动画运行的方向
  • normal | reverse | alternate | alternate-reverse
  • animation-play-state 动画状态
  • running | paused
  • animation-fill-mode 动画结束后的状态
    none | forwards| backwards | both

• demo

  • 加载图标的制作
    

    <ul><li></li><li></li><li></li><li></li><li></li></ul>

        ul,li{        list-style: none;    }    li{        display: inline-block;        margin: 0 2px;        width: 6px;        height: 70px;        background: blue;        border-radius: 6px;        animation: move 1s infinite both;    }    ul li:nth-child(1){        animation-delay: 0.4s;    }    ul li:nth-child(2){        animation-delay: 0.2s;    }    ul li:nth-child(3){        animation-delay: 0s;    }    ul li:nth-child(4){        animation-delay:0.2s;    }    ul li:nth-child(5){        animation-delay:0.4s;    }    @keyframes move {        0%{            transform: scale(1);        }        50%{            transform: scale(0.5);        }        100%{            transform: scale(1);        }    }

3D变换

• transform-style : flat | preserve-3d (3D空间展示)
• perspective 透视效果
• transform:perspective(800px) 直接作用在子元素上
• perspective-origin 透视点位置（默认中心点）
• transform 新增函数
  
  • translate3d( tx , ty, tz )
    translateX() translateY() translateZ()
  • rotate3d( rx , ry , rz，a)
    rotateX() rotateY() rotateZ()
  • scale3d( sx , sy , sz)
    scaleX() scaleY() scaleZ()

<div id="wrap">    <div class="slide"></div></div>

 #wrap{            width: 200px;            height: 200px;            border: 1px solid green;            margin: 100px auto;            transform-style: preserve-3d;/*wrap下的子元素在3D空间展示，【作用在父标签元素】*/            perspective: 2000px;/*1.景深效果/透视效果【有近大远小的效果】*/        }        #wrap .slide{            width: 100%;            height: 100%;            background: red;           /* transform:perspective(2000px);*//*2.直接作用在变形元素上的*/        /*rotateX(0deg);正值-》前翻，负值-》后翻*/        /*rotateY(45deg);正值-》右翻，负值-》左翻*/        /*rotateZ(45deg);在z轴上旋转效果等同于2d变形的rotate方法的效果*/            rotate3d(rx,ry,rz,a);           /* rx:x轴上的矢量坐标 rotate3d(1,0,0,45deg);-->rotateX(45deg)            ry:y轴上的矢量坐标  rotate3d(0,1,0,45deg);-->rotateY(45deg)            rz:z轴上的矢量坐标  rotate3d(0,0,1,45deg);-->rotateZ45deg)            a:角度*/        }        #wrap:hover .slide{           /* -webkit-transform: translateZ(-200px);            -webkit-transition: 1s;*/         /*   transform: rotateX(45deg) scale3d(1,1,0.5);!*scaleZ在z轴上的缩放如果单独使用不起作用，必须配合者其他变形方法一起使用*!            transition: 1s;*/            /*transform:rotateX(-45deg);!*正值-》前翻，负值-》后翻*!*/           /* transform:rotateY(45deg);!*正值-》右翻，负值-》左翻*!            transition: 1s;*/            transform: rotate3d(1,0,0,45deg);            transition: 1s;        }