CSS3之过渡

过渡

通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。

transition

• 帧动画的本质其实就是画面一张张的切换,由于速度关系,肉眼分辨不出,所以看起来就是连续的画面,transition干的,其实就是类似的事情
• 需要注意的是,如果发现没有过渡效果,可能是没有一个 起始值
• 过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果
• IE9-不支持该属性，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀；而其余高版本浏览器支持标准写法

属性名	作用
transition-property	过渡属性(默认值为all)
transition-duration	过渡持续时间(默认值为0s)(必需值且不能为0)
transiton-timing-function	过渡函数(默认值为ease函数)
transition-delay	过渡延迟时间(默认值为0s)

• 语法:

/*语法组合方式*/
transition:过渡CSS属性 持续时间 动画方式 延迟时间;
/*transition-duration和transition-delay都是时间。
当两个时间同时出现时，第一个是transition-duration，第二个是transition-delay；
当只有一个时间时，它是transition-duration，而transition-delay为默认值0*/

/* 多属性过渡组合写法  通过逗号分隔*/
/* 空格隔开的代表不同属性的四个关于过渡的子属性*/
transition:过渡1,过渡2....

/*具体代码*/

/* 所有属性 1s动画 ease-in动画方式 延迟1s*/
transition: all 1s ease-in 1s;

/*
top属性 1s动画 ease-in动画方式 
left属性 1s动画 ease-out动画方式 延迟1s
width属性 1s动画 liner动画方式 延迟2s
height属性 1s动画 ease-in-out动画方式 延迟3s 
background-Color属性 1s动画 ease动画方式 延迟4s 
*/
transition: top 1s ease-in,
            left 1s  ease-out 1s,
            width 1s  ease-liner 2s,
            height 1s  ease-in-out 3s;

transition-property 过渡属性

• 值:
  • none: 没有指定任何样式
  • all: 默认值，表示指定元素所有支持transition-property属性的样式
  • transition-property: 可过渡的样式，可用逗号分开写多个样式
    • 可过渡的样式

    不是所有的CSS样式值都可以过渡，只有具有中间值的属性才具备过渡效果
    * 颜色: color background-color border-color outline-color
    * 位置: backround-position left right top bottom
    * 长度:
    * [1]max-height min-height max-width min-width height width
    * [2]border-width margin padding outline-width outline-offset
    * [3]font-size line-height text-indent vertical-align
    * [4]border-spacing letter-spacing word-spacing
    * 数字: opacity visibility z-index font-weight zoom
    * 组合: text-shadow transform box-shadow clip
    * 其他: gradient

transition-duration 过渡持续时间

• 值是时间,单位是秒s或者毫秒ms
• 该属性不能为负值
• 默认值为0s，若为0则为无效值。所以必须带单位
• 该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间

transition-delay 过渡延迟时间

• 值是时间,单位是秒s或者毫秒ms
• 该属性若为负值，无延迟效果，但过渡元素的起始值将从0变成设定值(设定值=延迟时间+持续时间)。若该设定值小于等于0，则无过渡效果；若该设定值大于0，则过渡元素从该设定值开始完成剩余的过渡效果

transition-timing-function 过渡时间函数

过渡时间函数用于定义元素过渡属性随时间变化的过渡速度变化效果

• 取值:关键字、steps函数和bezier函数

• 关键字

  • ease: 开始和结束慢，中间快。默认值.相当于cubic-bezier(0.25,0.1,0.25,1)
  • linear: 匀速。相当于cubic-bezier(0,0,1,1)
  • ease-in: 开始慢。相当于cubic-bezier(0.42,0,1,1)
  • ease-out: 结束慢。相当于cubic-bezier(0,0,0.58,1)
  • ease-in-out: 和ease类似，但比ease幅度大。相当于cubic-bezier(0.42,0,0.58,1)
  • step-start: 直接位于结束处。相当于steps(1,start)
  • step-end: 位于开始处经过时间间隔后结束。相当于steps(1,end)

• 贝塞尔曲线动画

  • 在设置动画曲线的位置通过cubic-bezier()的方式进行设置
  • 计算贝塞尔曲线在线网址
  • 语法:

/* 其中 需要传入四个值,并且每个值都是0-1的小数*/
transition: top 1s cubic-bezier(0.1,0.2,0.3,0.4);

• step动画
  • 除了可以使用贝塞尔曲线设置外,我们还能够设置过渡的动画次数
  • 语法:

/* 1s动画 每隔 1/6 s 完成一次  在每次间隔的 末尾 开始动画  */
transition: top 1s steps(6,end);
/* 1s动画 每隔 1/6 s 完成一次  在每次间隔的 开始 开始动画  */
transition: top 1s steps(6,start);

• steps步进函数将过渡时间划分成大小相等的时间时隔来运行
  • steps步进函数为steps(<integer>[,start | end]?)
  • <integer>:用来指定间隔个数(该值只能是正整数)
  • 第二个参数: 该参数可选，默认是end，表示开始值保持一次；若参数为start，表示开始不保持

过渡步进函数.png