CSS中transition以及时间函数steps()

概念

---

transition：过渡、转变

transition 是个简写属性，用于设置四个过渡属性

• transition-property 规定设置过渡效果的css属性的名称
• transition-duration 规定完成过渡效果需要多少秒或多少毫秒 必填项 必须带单位
• transition-timing-function 规定速度效果的速度曲线 eg：贝塞尔曲线 linear ease等
• transition-delay 规定过渡效果多少毫秒之后开始。默认为0

eg：

.test{
    height: 100px;
    width: 100px;
    background-color: pink;
    transition: 1s 2s;
}    
.test:hover{
    width: 500px;
}

transiton-property

---

值：none| all | [,]*
默认值：all
应用于：所有元素（即所有元素都有transition属性，跟所有block元素有宽高属性一样）
none:没有指定任何样式
all:表示指定元素所有支持过渡属性的样式，多个时用逗号隔开

可过渡的样式
不是所有的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-timing-function

---

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)

steps函数

步进函数将过渡时间分成大小相等的时间时隔来运行
没有过度效果，而是一帧一帧的变化，integer等于几就分成几帧，阶跃函数

steps(<integer>[,start| end]?)

<integer>:用于指定间隔个数（该值只能是正整数）
第二个参数可选，默认是end,表示开始值保持一次，若参数为start，表示开始值不保持

eg：

#div {
    width: 100px;
    height: 100px;
    animation-name: skyset;
    animation-duration: 5000ms;
    animation-iteration-count: 1;
    border: 1px solid blue;
    animation-timing-function: linear;
    -webkit-animation-name: skyset;
    -webkit-animation-duration: 5000ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: steps(5, end);
}

@-webkit-keyframes skyset {
    0% {
        width: 100px;
    }
    50% {
        width: 150px;
    }
    100% {
        width: 200px;    
    }
}

integer:
动画效果: 0%-50% 之间的过渡效果，变化五次 即从100px->150px 变化5次
50%-100%之间的过渡效果变化五次，即从150px->200px 变化5次
注：steps的设置是针对两个关键帧之间的的，而非整个动画。

重点是start和end
start | end

0% {
    background: red
}
30% {
    background: yellow
}
60% {
    background: blue;
}
100% {
    background: green;
}

原理解释：
（1，start | end）

四个关键帧           一共变化四次   div本身是没有背景色的，所以最终的背景是无色。但是只变化四次，有四种颜色，加上无色，一共五种状态，所以需要丢弃一种状态。

start   黄、蓝、绿、无色               把第一帧的效果去掉，第二帧的效果为填充效果
end    红、黄、蓝、无色               把最后一帧的效果去掉，第一帧的效果为填充效果

(2,start | end)

即每个关键帧都分成两次变化完成，则一共有七次变化。
七帧      一共变化七次，  div本身没有颜色，所以最终的背景无色。但是，只变化七次，有七种颜色，加上无色，一种八种状态，所以需要丢弃一种状态

start   橙、黄、灰、蓝、深灰蓝、绿、无色         
原理：去掉第一帧的效果，


end    红、橙、黄、灰、蓝、深灰蓝、无色
原理：去掉最后一帧的效果