CSS3过渡

CSS3 过渡使前端开发人员通过CSS和JHTML来实现动画效果，而不需要借助Flash或者JavaScript。

可以通过：hover，：focus，：active，：checkded，或者JavaScript触发一个元素，使用过渡会使样式的变化更加细腻，而不会突兀，用户体验更好。

1.CSS3过渡简介
CSS3的transition允许CSS属性值在一定的时间区间内平滑过渡。这种效果可以再鼠标点击、获得焦点、被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS属性值。

1.1 如何创建简单的过渡

1. 在默认样式中声明样式的初始状态
2. 声明过渡元素最终状态样式，比如悬浮状态
3. 在默认样式中通过添加过渡函数，添加一些不同点样式

1.2 CSS3过渡属性
transition: 过渡属性 || 过渡所需事件 || 过渡动画函数 || 过渡延迟时间

2.CSS3过渡子属性详解

2.1 指定过渡属性 transition-property

通过transtion-property属性来指定过渡动画的CSS属性名称。

transtion-property: none | all | sing-transition-property

• none: 没有指定任何样式
• all:默认值，表示指定元素所有支持的transition-property属性的样式
• sing-transition-property,单个属性，有多个需要用逗号分隔。

    .content {

        background: red;
        height: 200px;
        width: 200px;
        font-size: 20px;
        color:white;
    }
    .content-one:hover {
        background: green;
        font-size: 40px;
        color:red;
        transition: all 2s ease-in-out 1s; 
        border: 3px double red; 
    }

过渡属性指定所有，当过渡开始时所有属性都将发生变化。
点击查看demo：transition
如果`

.content-two:hover {
    background: green;
    font-size: 40px;
    color:black;
    transition: color 2s ease-in-out 1s; 
    border: 3px double red;  

}

会发现只有字体颜色发生用到了转变，其他改变的样式瞬间发生变化。

点击查看demo：transition

2.2 指定过渡所需时间 tranition-duration

设置一个属性属性值过渡到另一个属性值所需要的事件，和transition-property属性一样，当设置多个过渡属性时，可以设置多个tranition-duration，每个值之间同样用逗号分隔开，且每个值按顺序对应transition-property的属性值。

2.3 transition-timing-function
指定某种指代过渡“缓动函数”的属性。此属性可指定浏览器的过渡速度，以及过渡期间的操作进展情况，可以将某个值指定为预定义函数，阶梯函数或者三次贝塞尔曲线。

2.3.1 单一的过渡函数

• ease:默认值，由快到慢，逐渐变慢
• linear: 恒速过渡
• ease-in: 渐显效果，越来越快
• ease-out:渐隐效果，速度越来越慢
• ease-in-out:先加速再减速，渐显渐隐效果

2.3.2 三次贝塞尔曲线

cubic(p0,p1,p2,p3)

2.3.3 step()函数

语法：

step(integer,start|end)

• 第一个参数integer:主要用来指定step()函数间隔的数量，此值必须是一个大于0的正整数。
• 第二个参数是可选的，是start，如果第二个参数忽略，则默认为end值。
• step(1,start)==step-start
• step(1,end)==step-end
• 动画七个步骤，动画结束发生在最后一步::step(7,end)

2.4 transition-delay

用来指定一个动画开始执行时间，也就是说当改变元素属性值后多长时间开始执行过渡效果，取值为time，它可以是正整数，负数和零，非0的时候必须将单位设置为s或者ms

• 正整数：元素的过渡动作不会立即触发，当过了设定的时间值之后才触发
• 负整数：元素的过渡动作不会从该时间点开始显示，之前的动作被截断
• 0：默认值，元素的动作会立即触发，没有任何延迟。

3.CSS3触发过渡

• 伪元素触发
  
  • :active
  • :focus
  • :checked
• 媒体查询触发
• JavaScript触发